Default Display Property Block

/* Default Display Property
Block : Always starts a new line and takes full width
Inline : Does not start and only take up as much as content space
*/

index.html:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tutorial</title>
    <!-- google fonts -->
    <!-- <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Yesteryear&display=swap" rel="stylesheet"> -->
    <link rel="stylesheet" href="styles.css">

   
</head>
<body >
    <div class="block">i'm block element</div>
    <h1 class="block">i'm block element</h1>
    <p class="block">i'm block element</p>
    <span class="inline">i'm inline element</span>
    <a href="#" class="inline">i'm inline elemnet</a>
    <img src="/detox.jpg" width="50" alt="">
</body>
</html>

css:

/* Default Display Property
Block : Always starts a new line and takes full width
Inline : Does not start and only take up as much as content space
 */
body{
    text-align: center;
}
.block{
    background: blue;
    color: white;
    width: 150px;
    margin: 20px auto;
    /* margin-left: auto;
    margin-right: auto; */
}
.inline {
    background: red;
    color: white;
}












评论

发表评论

此博客中的热门博文

Nginx【Docker系列】一个反向代理神器——Nginx Proxy Manager

 nginx 安装docker 安装Docker、Docker-compose 更新、安装必备软件 apt-get update && apt-get install -y wget vim 安装docker：非大陆Docker安装 wget -qO- get.docker.com | bash 查看Docker版本 docker -v 开机自动启动 systemctl enable docker 卸载Docker sudo apt-get purge docker-ce docker-ce-cli containerd.io sudo rm -rf /var/lib/docker sudo rm -rf /var/lib/containerd 非大陆Docker-compose安装 sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose docker-compose --version 强烈建议大家专门给Docker的数据、配置文件新建一个文件夹 mkdir -p data/docker_data ---------- docker 安装 nginx mkdir /root/data/docker_data/NPM nano docker-compose.yml 配置代码 version: "3" services: app: image: 'jc21/nginx-proxy-manager:latest' restart: unless-stopped ports: # These ports are in format <host-port>:<container-port> - '80:80' # Public HTTP Port - '443:44...
阅读全文

又一款美国免费主机，无限流量动态X10hosting

图片
  X10hosting提供的免费套餐配置如下： 控制面板 空间 流量 顶级域名 SSL FTP 邮箱 数据库 文件数 Cpanel 512M 无限 支持 支持 支持 3个 2个 50000 X10hosting也有高级托管套餐和VPS，分别是$3.95和$8.95起，无其他限制，但是本文我使用的依旧是免费套餐，下面简单测试使用教程和用户体验。 X10的注册 1、在 https://x10hosting.com/#create ，我们选择免费计划，继续到下一个页面。 2、然后直接填写邮箱，点击继续！然后到邮箱收信，点激活链接继续下一步。 3、接下来我们要完成用户和团队的设置，例如填写 网站名称、住址等等，我注册时候没有截图，当然这并不困难。 X10的使用 1、完成注册后，我们登陆地址是  https://x10hosting.com/login-select ，我们刚刚注册的是x10hosting，点击最左边进入即可。 2、接下来我们输入邮箱和密码，点击登陆，到用户仪表盘。然后点击 Add New，添加一个服务，名字随便吧，就是给你的二级域名。 3、点击服务名称即可进入主机管理面板，这里的选项都比较常见，如：SSL、域名设置、php版本管理等等。 4、支持ftp上传文件，注意目录我们要选择：public_html； 5、另外就是X10支持自动安装程序，点击扩展——wordpress，来到softaculous，即可一键安装多达380种程序。哪怕是用它来学习或者选择适合自己的程序，也蛮不错的。 X10使用心得 1、X10的网站设计比较简单，支持中文，我觉得很容易理解； 2、给到的二级域名是*.x10.mx的，实在不适合建站使用，若是想做站点要弄个顶级域来；另外就是空间欧美用户访问比较快（ping在60ms以内）整个英文站也不错。 3、最大的优点是无限流量，妈妈再也不用担心超过限制网站无法访问了！ 综合评分 ⭐⭐⭐⭐⭐ 感觉不错，那就来注册吧~  https://x10hosting.com/#create 视频教程： 哔哩哔哩： https://www.bilibili.com/video/BV188411s7Hu/ YouTube： https://www.youtube.com/watch?v=mNqp-npuZ_A
阅读全文

哪吒面板VPS探针搭建教程，便携服务器状态监控

图片
 来源： https://iweec.com/292.html  https://www.youtube.com/watch?v=qLXq85m0RJ8&t=309 哪吒面板作者仓库 https://github.com/naiba/nezha 准备工作 准备一个域名 注册一个github的账户 准备一条vps作为面板机器，并搭建好宝塔面板。 1、安装宝塔 wget -O install.sh  http://download.bt.cn/install/install-ubuntu_6.0.sh  && bash install.sh 2解析域名,例如 vps.domain.com 和 88.domain.com 都A指向到面板IP 3 注册github 创建一个OAuth Apps， 打开： https://github.com/settings/developers  然后点击New OAuth App按钮,填入你第一个域名 https://你的域名 https://你的域名/oauth2/callback 输入完成后，能看到OAuth Apps的Client ID和Client secrets两个数值，（其中Client secrets需要自己创建一下）保存下来。 4、部署面板 国外机 curl -L  https://raw.githubusercontent.com/naiba/nezha/master/script/install.sh  -o nezha.sh && chmod +x nezha.sh && ./nezha.sh 国内机 curl -L  https://raw.sevencdn.com/naiba/nezha/master/script/install.sh  -o nezha.sh && chmod +x nezha.sh && ./nezha.sh 选择1开始安装面板 所涉及到的数值，前面都有提到。 进入服务器宝塔后台，创建一个站点，用你带套的那个域名。 然后网站设置，添加反向代理 location / { proxy_pass http://127.0....
阅读全文