CSS样式基础入门

已于 2024-07-09 13:53:44 修改
阅读量876 收藏 12
点赞数 13
文章标签： css 前端
于 2024-07-09 13:44:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HISAY_ONE/article/details/139930669
版权

css，专门用于“美化”标签。

·基础CSS，写简单页面&看懂&改。

·模块，调整和修改。

1.在标签上

<img src="..." style="height:100px"/>

<div style="color:red;">中国联通</div>

2.在head标签中写style标签(这种方法很方便我们对样式进行复用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
              color:red;
            }
    </style>
</head>
<body>

    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>


</body>
</html>

3.写到文件中(如果多个页面是都需要用到同一款样式时，我们选择通过写到文件中来直接引用标签)

.c1{
     height:100px;
}
.c2{
     color:red;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="common.css"/>   //rel:表示当前元素和所链接资源之间的关系；href:指向了所链接资源的位置。
</head>
<body>

    <h1 class='c1'>用户登录</h1>
    <h1 class='c2'>用户登录</h1>
    <h1 class='c2'>用户登录</h1>
    <h1 class='c1'>用户登录</h1>

</body>
</html>

###案例：flask中的应用（登录注册）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:40px
        }

        .c2{
            height:50px
        }
    </style>
</head>
<body>

    <h1 class="c1">用户登录</h1>
    <form method="POST" action="/login">

        <div class="c2">
                用户名：<input type="text" name="username">
        </div>

        <div class="c2">
                密码：<input type="text" name="password">
        </div>

        <input type="submit" value="提交">
    </form>

</body>
</html>

问题：用Flask框架开发不方便

1.每次都需要重启

2.规定有些文件必须要放在特定的文件夹（比如static，templates）

3.新创建一个页面

（1）函数

（2）HTML文件

有没有一种方式，可以让我快速编写前端的代码并查看效果呢，最后再将页面集成到Flask中。pycharmh中可以直接访问浏览器的方式查看效果：

4，选择器

（1）类选择器

  /*类选择器*/
        .c1{
            color: red;
        }

（2）ID 选择器

  /*ID选择器*/
        #c2{
            color: gold;
        }

（3）标签选择器

    /*标签选择器*/
        li{
            color:pink;
        }

（4）属性选择器

        /*属性选择器*/
        input[type='text']{
        border: 1px solid red;
        }
        .v1[xx="456"]{
            color: gold;
        }

（5）后代选择器

        /*后代选择器*/
        .yy li{
                color: pink;
        }
        .yy > a{            /*只找儿子的，不找孙子里的*/
            color:blue;
        }

关于选择器：

·用的多的：类选择器，标签选择器，后代选择器。

·用的少的：属性选择器，ID选择器。

5.样式

（1）高度和宽度

        .c1{
            height:300px;
<!--            width:500px;-->
            width: 50%;     /*宽度支持百分比*/
        }

注意事项：

·宽度，支持百分比。

·行内标签：默认无效。

块级标签：默认有效（霸道，右侧区域空白，也不给你占用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height:300px;
<!--            width:500px;-->
            width: 50%;     /*宽度支持百分比*/
        }
    </style>

</head>
<body>
    <div class="c1">中国</div>
    <span>华为</span>
    <div>芯片强国</div>
</body>
</html>

（2）块级标签和行内标签

·块级标签

·行内标签

·CSS样式(既具有行内标签和块级标签的特性)：标签-> display:inline-block

示例：行内&块级特性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            display: inline-block;

            height:100px;
            width:300px;
            border:1px solid red;
        }
    </style>

</head>
<body>

    <span class="c1">中国</span>
    <span class="c1">电子</span>
    <span class="c1">华为</span>
    <span class="c1">世界</span>
    <span class="c1">第一</span>

</body>
</html>

示例：块级和行内标签的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div style="display:inline;">中国</div>                /*将块级标签变为行内标签*/
    <span style="diaplay:block;">xidian</span>            /*将行内标签变为块级标签*/
    
</body>
</html>

注意：块级+块级&行内。（一般我们希望能占一整行，但是块级不能加高度和宽度所以也有块级&行内）。

6.字体设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: green;
            font-size:58px;                         /*字体大小*/
            font-weight:600;                        /*字体粗细*/
            font-family:Microsoft Yahei;            /*字体设置*/
        }


    </style>
</head>
<body>
    <div class="c1">中国电子</div>
    <div>中国华为</div>

</body>
</html>

7.文字对齐方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 59px;
            width: 300px;
            border: 1px solid red;

            text-align: center;          /*水平方向居中*/
            line-height: 59px;           /*垂直方向居中*/

        }


    </style>
</head>
<body>
    <div class="c1">中国电子</div>

</body>
</html>

8.浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>左边</span>
        <span style="float:right">右边</span>
    </div>

</body>
</html>

div默认块级标签（霸道），如果浮动起来，就不一样了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>
</html>

如果你让标签浮动起来，就会脱离文档流，一旦在一个div里面用了浮动，则一定要将脱离文档流的div拽回来，否则无法将他们的父亲撑起来。使用

 <div style="clear: both;"></div>

语句将浮动的div拽回来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .item{
            float: left;
            width: 280px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div style="background-color: blue">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div style="clear: both;"></div>                /*一旦在一个div里面用了浮动，则一定要将脱离文档流的div拽回来，否则无法将他们的父亲撑起来。*/
    </div>
    <div>你好</div>
</body>
</html>

9.内边距

内边距，我自己的内部设置一点距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
               border: 1px solid red;
               height: 200px;
               width: 200px;

               padding-top: 20px;
               padding-left: 20px;
               padding-right: 20px;
               padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold">听妈妈的话</div>
        <div>
            小朋友你是否有很多问号
        </div>
    </div>
</body>
</html>

10.外边距

外边距，我与别人加点距离。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="height: 200px;background-color:blue;"></div>
<div style="background-color:red;height:100px;margin-top:20px;"></div>    # 自己不增大，离上面的顶部距离是20px。
</body>
</html>

1.1案例：小米商城。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }
        
        .header{
              color: #b0b0b0;
              background: #333;
        }

        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu{
            float: left;
            color: white;
        }

        .header .account{
            float: right;
            color: white;
        }

        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right:50px;
        }
    </style>
</head>

<body>
<div class="header">
        <div class="container">
        <div class="menu">
            <a>小米商城</a>
            <a>MIUI</a>
            <a>云服务</a>
            <a>有品</a>
            <a>开放平台</a>
        </div>
        <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
        </div>
        <div style="clear: both"></div>
        </div>
</div>
</body>
</html>

总结：

（1）body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除呢？

  body{
            margin:0;
        }

（2）内容居中

·文本居中，文本会在这个区域中居中。

<div style="width:200px;text-allign:center;">武汉市</div>

·区域居中，自己要有宽度 + margin-left:auto;margin-right:auto

        .container{
            width: 1226px;
            margin: 0 auto;
        }

·父亲没有高度或没有高度，被孩子支撑起来。

·如果存在浮动，一定记得加入，用于将浮动拽回来。

关于布局不知如何下手：

我们划分左右两边两块区域进行划分。以方便我们后续的填充。

·HTML标签

固定格式，记住标签长什么样子，例如：

h/div/span/a/img/ul/li/table/input/form

·CSS样式

引用CSS：标签，头部，文件

.xx{
      ...
}
<div class=‘xx xx’></div>
高度/宽度/块级or块级行内/浮动

1.2搭建骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sub-header{
            body{
                margin:0;
            }
            height: 100px;
            background-color:yellow;
        }
        .container{
            width: 1128px;
            margin: 0 auto;

            border-left:1px solid green;
            border-right:1px solid green;
        }

<!--        .sub-header .ht{-->
<!--            height:100px-->
<!--        }-->

        .sub-header .logo{
            width:234px;
            height:100px;
            float:left;
            border:1px solid red;
        }
        .sub-header .menu-list{
            float:left;
        }
        .sub-header .search{
            float:right;
        }
    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="logo">huawei</div>
            <div class="menu-list">xiaomi</div>
            <div class="search">zhongguo</div>
            <div class="clear:both;"></div>
        </div>

    </div>

</body>
</html>

1.3 logo区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sub-header{
            body{
                margin:0;
            }
            height: 100px;
            background-color:yellow;
        }
        .container{
            width: 1128px;
            margin: 0 auto;

            border-left:1px solid green;
            border-right:1px solid green;
        }

<!--        .sub-header .ht{-->
<!--            height:100px-->
<!--        }-->

        .sub-header .logo{
            width:234px;
            height:100px;
            float:left;
            border:1px solid red;
            li-height:100px;
        }
        .sub-header .menu-list{
            float:left;
        }
        .sub-header .logo a img{
            height:56px;
            width:56px;
        }
        .sub-header .search{
            float:right;
        }
    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="ht logo">
            <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
                <a href="https://www.mi.com/index.html" style="margin-top:22px;display:inline-block">
                    <img src="images/img.png" alt="">
                </a>

            </div>
            <div class="ht menu-list">2</div>
            <div class="search">3</div>
            <div class="clear:both;"></div>
        </div>

    </div>

</body>
</html>

1.4 菜单部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .sub-header{
            body{
                margin:0;
            }
            height: 100px;
<!--            background-color:yellow;-->
        }
        .container{
            width: 1128px;
            margin: 0 auto;

            border-left:1px solid green;
            border-right:1px solid green;
        }

<!--        .sub-header .ht{-->
<!--            height:100px-->
<!--        }-->

        .sub-header .logo{
            width:234px;
            height:100px;
            float:left;
<!--            border:1px solid red;-->
            li-height:100px;
        }
        .sub-header .logo a{
            margin-top:22px;
            display:inline-block;
         }
        .sub-header .logo a img{
            height:56px;
            width:56px;
        }

        .sub-header .menu-list{
            float:left;
            line-height:100px;                   <!--垂直方向居中-->
<!--        border:1px solid red;-->

        }
        .sub-header .menu-list a{
            display:inline-block;                <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
            padding:0 10px;
            color: #333;                         <!--字体颜色-->
            font-size: 16px;                     <!--字体大小-->

            text-decoration: none;               <!--去掉由于带有网址href而产生的下划线-->
        }

        .sub-header .menu-list a:hover{
                color:#ff6788;
        }

        .sub-header .search{
            float:right;
        }
    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="ht logo">
            <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
                <a href="https://www.mi.com/index.html" style="margin-top:22px;display:inline-block">
                    <img src="images/img.png" alt="">
                </a>

            </div>
            <div class="ht menu-list">
                <a href="https://www.mi.com/xiaomimixfold2">xiaomi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">Redmi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">电视</a>
                <a href="https://www.mi.com/xiaomimixfold2">笔记本</a>
                <a href="https://www.mi.com/xiaomimixfold2">平板</a>

            </div>
            <div class="search"></div>
            <div class="clear:both;"></div>
        </div>

    </div>

</body>
</html>

1.5 案例：顶部菜单 + 二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }

        .header{
              color: #b0b0b0;
              background: #333;
        }

        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu{
            float: left;
            color: white;
        }

        .header .account{
            float: right;
            color: white;
        }

        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right:50px;

            text-decoration = none;
        }
        
        .header a:hover{
            color:white;
        }


        .sub-header{
            height: 100px;
<!--            background-color:yellow;-->
        }
<!--        .sub-header .ht{-->
<!--            height:100px-->
<!--        }-->

        .sub-header .logo{
            width:234px;
            height:100px;
            float:left;
<!--            border:1px solid red;-->
            li-height:100px;
        }
        .sub-header .logo a{
            margin-top:22px;
            display:inline-block;
         }
        .sub-header .logo a img{
            height:56px;
            width:56px;
        }

        .sub-header .menu-list{
            float:left;
            line-height:100px;                   <!--垂直方向居中-->
<!--        border:1px solid red;-->

        }
        .sub-header .menu-list a{
            display:inline-block;                <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
            padding:0 10px;
            color: #333;                         <!--字体颜色-->
            font-size: 16px;                     <!--字体大小-->

            text-decoration: none;               <!--去掉由于带有网址href而产生的下划线-->
        }

        .sub-header .menu-list a:hover{
                color:#ff6788;
        }

        .sub-header .search{
            float:right;
        }
    </style>
</head>

<body>
<div class="header">
        <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a href="https://www.mi.com/index.html">MIUI</a>
            <a href="https://www.mi.com/index.html">云服务</a>
            <a href="https://www.mi.com/index.html">有品</a>
            <a href="https://www.mi.com/index.html">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/index.html">登录</a>
            <a href="https://www.mi.com/index.html">注册</a>
            <a href="https://www.mi.com/index.html">消息通知</a>
        </div>
        <div style="clear: both"></div>
        </div>
</div>

<div class="sub-header">
        <div class="container">
            <div class="ht logo">
            <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
                <a href="https://www.mi.com/index.html" style="margin-top:22px;display:inline-block">
                    <img src="images/img.png" alt="">
                </a>

            </div>
            <div class="ht menu-list">
                <a href="https://www.mi.com/xiaomimixfold2">xiaomi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">Redmi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">电视</a>
                <a href="https://www.mi.com/xiaomimixfold2">笔记本</a>
                <a href="https://www.mi.com/xiaomimixfold2">平板</a>

            </div>
            <div class="search"></div>
            <div class="clear:both;"></div>
        </div>

    </div>


</body>
</html>

小结：

1.a标签是行内标签，行内标签的高度，内外边距，默认无效。

2.垂直方向居中

·文本 + line-height

·图片 + 边距

3.a标签默认有下划线。

4.鼠标放上去之后hover.

.c1：hover{
     ···
}
a:hover{
    ···
}

1.6划分区域

1.7 搭建骨架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }

        .header{
              color: #b0b0b0;
              background: #333;
        }

        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu{
            float: left;
            color: white;
        }

        .header .account{
            float: right;
            color: white;
        }

        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right:50px;

            text-decoration = none;
        }

        .header a:hover{
            color:white;
        }


        .sub-header{
            height: 100px;
<!--            background-color:yellow;-->
        }
<!--        .sub-header .ht{-->
<!--            height:100px-->
<!--        }-->

        .sub-header .logo{
            width:234px;
            height:100px;
            float:left;
<!--            border:1px solid red;-->
            li-height:100px;
        }
        .sub-header .logo a{
            margin-top:22px;
            display:inline-block;
         }
        .sub-header .logo a img{
            height:56px;
            width:56px;
        }

        .sub-header .menu-list{
            float:left;
            line-height:100px;                   <!--垂直方向居中-->
<!--        border:1px solid red;-->

        }
        .sub-header .menu-list a{
            display:inline-block;                <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
            padding:0 10px;
            color: #333;                         <!--字体颜色-->
            font-size: 16px;                     <!--字体大小-->

            text-decoration: none;               <!--去掉由于带有网址href而产生的下划线-->
        }

        .sub-header .menu-list a:hover{
                color:#ff6788;
        }

        .sub-header .search{
            float:right;
        }

        .slider img{
            width: 1226px;
            height: 460px;
        }

    </style>
</head>

<body>
<div class="header">
        <div class="container">
        <div class="menu">
            <a href="https://www.mi.com/index.html">小米商城</a>
            <a href="https://www.mi.com/index.html">MIUI</a>
            <a href="https://www.mi.com/index.html">云服务</a>
            <a href="https://www.mi.com/index.html">有品</a>
            <a href="https://www.mi.com/index.html">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/index.html">登录</a>
            <a href="https://www.mi.com/index.html">注册</a>
            <a href="https://www.mi.com/index.html">消息通知</a>
        </div>
        <div style="clear: both"></div>
        </div>
</div>

<div class="sub-header">
        <div class="container">
            <div class="ht logo">
            <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
                <a href="https://www.mi.com/index.html" style="margin-top:22px;display:inline-block">
                    <img src="images/img.png" alt="">
                </a>

            </div>
            <div class="ht menu-list">
                <a href="https://www.mi.com/xiaomimixfold2">xiaomi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">Redmi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">电视</a>
                <a href="https://www.mi.com/xiaomimixfold2">笔记本</a>
                <a href="https://www.mi.com/xiaomimixfold2">平板</a>

            </div>
            <div class="search"></div>
            <div class="clear:both;"></div>
        </div>

    </div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="images/img_1.png" alt="">
        </div>
    </div>
</div>

<div class="news">
    <div class="container">
        <div class="channel"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
        <div class="list-item"></div>
    </div>



</div>

</body>
</html>

小结：

·设置透明度:

opacity:0.5            /*0 ~ 1*/

2.CSS知识点

2.1 hover（hover 伪类用于定义当鼠标指针悬停在元素上时的特殊样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color:red;
            font-size:18px;
        }
        .c1:hover{
            color:green;
            font-size: 50px;
        }
        .c2{
            height: 300px;
            width: 500px;
            border: 1px solid red;
        }
        .c2:hover{
            border:3px solid green;
        }

        .download{
            display: none;
        }

        .app:hover .download{
            display: block;
        }
        .app:hover .title{
            color: red;
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>

    <div class="c2">华为</div>

    <div class="app">
        <div class="title">下载APP</div>
        <div class="download">
            <img src="images/img_5.png" alt="">
        </div>

    </div>
</body>
</html>

2.2 after（after 伪元素用于在选定元素的后面插入内容）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after{
            content: "huawei";
        }
    </style>
</head>
<body>
    <div class="c1">中国</div>
    <div class="c1">武汉</div>
</body>
</html>

2.3 position

·fixed

·relative

·absolute

1. fixed(固定在窗口的某个位置)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .dialog{
            position: fixed;
            height: 300px;
            width: 500px;
            background-color: white;

            left:0;
            right:0;
            margin:0 auto;

            top:200px;

            z-index:1000;
        }
        .mask{
            background-color: black;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: 0.7;
            z-index:999;
        }

    </style>
</head>
<body>


<div style="height: 1000px;background-color:#5f5750"></div>

<div class="mask"></div>
<div class="dialog"></div>


</body>
</html>

2.relative和absolute

relative（定位是相对于元素原来的位置进行定位）。

absolute（定位是相对于最近的非静态定位祖先元素进行定位）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            margin:100px;

            position:relative;
        }
        .c1 .c2{
            height: 59px;
            width: 59px;
            background-color:#80FF7F;

            position:absolute;
            right: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>

案例：小米商城下载app

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin:0;
        }

        .header{
              color: #b0b0b0;
              background: #333;
        }

        .left{
            float:left;
        }

        .container{
            width: 1226px;
            margin: 0 auto;
        }

        .header .menu{
            float: left;
            color: white;
        }

        .header .account{
            float: right;
            color: white;
        }

        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right:50px;

            text-decoration = none;
        }

        .header a:hover{
            color:white;
        }


        .sub-header{
            height: 100px;
<!--            background-color:yellow;-->
        }
<!--        .sub-header .ht{-->
<!--            height:100px-->
<!--        }-->

        .sub-header .logo{
            width:234px;
            height:100px;
            float:left;
<!--            border:1px solid red;-->
            li-height:100px;
        }
        .sub-header .logo a{
            margin-top:22px;
            display:inline-block;
         }
        .sub-header .logo a img{
            height:56px;
            width:56px;
        }

        .sub-header .menu-list{
            float:left;
            line-height:100px;                   <!--垂直方向居中-->
<!--        border:1px solid red;-->

        }
        .sub-header .menu-list a{
            display:inline-block;                <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
            padding:0 10px;
            color: #333;                         <!--字体颜色-->
            font-size: 16px;                     <!--字体大小-->

            text-decoration: none;               <!--去掉由于带有网址href而产生的下划线-->
        }

        .sub-header .menu-list a:hover{
                color:#ff6788;
        }

        .sub-header .search{
            float:right;
        }

        .slider img{
            width: 1226px;
            height: 460px;
        }

        .news .channel{
            width: 228px;
            height: 164px;
            background-color:#ff6700;
            padding: 3px;
        }

        .news .channel .item{
            height: 82px;
            width: 76px;
            float: left;
        }

       .news .list-item{
            width: 316px;
            height: 170px;
       }

        .back{
            position: fixed;
            width: 60px;
            height: 68px;
            border: 1 solid red;

            left: 0;
            top: 50px;

        }


        .app{
            position:relative
        }

        .app .download{
            position:absolute;
            height: 100px;
            width: 100px;
            display:none;
        }

        .app:hover .download{
            display: block;
        }

    </style>
</head>

<body>
<div class="header">
        <div class="container">
            <div class="menu">
                <a href="https://www.mi.com/index.html">小米商城</a>
                <a href="https://www.mi.com/index.html">MIUI</a>
                <a href="https://www.mi.com/index.html">云服务</a>
                <a href="https://www.mi.com/index.html" class="app">下载app
                    <div class="download">
                        <img src="images/img_5.png" alt="">
                    </div>
                </a>
                <a href="https://www.mi.com/index.html">有品</a>
                <a href="https://www.mi.com/index.html">开放平台</a>
            </div>
            <div class="account">
                <a href="https://www.mi.com/index.html">登录</a>
                <a href="https://www.mi.com/index.html">注册</a>
                <a href="https://www.mi.com/index.html">消息通知</a>
            </div>
        <div class="clear: both"></div>
        </div>
</div>

<div class="sub-header">
        <div class="container">
            <div class="ht logo">
            <!--a 标签是行内标签：默认不能设置高度,边距无效。->块级 or 行内+块级则有效-->
                <a href="https://www.mi.com/index.html" style="margin-top:22px;display:inline-block">
                    <img src="images/img.png" alt="">
                </a>

            </div>
            <div class="ht menu-list">
                <a href="https://www.mi.com/xiaomimixfold2">xiaomi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">Redmi手机</a>
                <a href="https://www.mi.com/xiaomimixfold2">电视</a>
                <a href="https://www.mi.com/xiaomimixfold2">笔记本</a>
                <a href="https://www.mi.com/xiaomimixfold2">平板</a>

            </div>
            <div class="search"></div>
            <div class="clear:both"></div>
        </div>

    </div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="images/img_1.png" alt="">
        </div>
    </div>
</div>

<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a href="https://www.mi.com/xiaomimixfold2">
<!--                    <img src="" alt="">-->
                </a>
            </div>
            <div class="item">2</div>
            <div class="item">3</div>
            <div class="item">4</div>
            <div class="item">5</div>
            <div class="item">6</div>
            <div class="clear:both"></div>
        </div>

        <div class="list-item left" style="margin-left:15px">
            <img src="images/img_2.png" alt="">
        </div>
        <div class="list-item left" style="margin-left:15px">
            <img src="images/img_3.png" alt="">
        </div>
        <div class="list-item left" style="margin-left:15px">
            <img src="images/img_4.png" alt="">
        </div>
        <div class="clear:both"></div>
    </div>
</div>

<div class="back"></div>


</body>
</html>

2.4 border(边框)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 300px;
            width: 500px;
            border: 1px solid red;
            border-left: 3px solid yellow;
            margin:100px;

        }

    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>

透明色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 50px;
            width: 500px;
            margin:100px;
            background-color: yellow;
            border: 3px solid transparent;
        }

        .c1:hover{
                    border-left: 2px solid blue;
        }

    </style>
</head>
<body>
    <div class="c1">
        <div class="c2">菜单</div>
    </div>
</body>
</html>


2.5 背景色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            height: 50px;
            width: 500px;
            margin:100px;
            background-color: yellow;

        }
      
    </style>
</head>
<body>
    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>

3.1 BootStrap

运行结果：

3.2 导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .navbar{
            border-radius:0;                <!--用于去除圆角-->
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>
</body>
</html>

3.3 栅格系统

·响应式：根据屏幕的宽度不同进行响应。

.col-xs-	.col-sm-	.col-md-	.col-lg-

·非响应式：

    <div>
        <div class="col-xs-2" style="background-color: red">1</div>
        <div class="col-xs-6" style="background-color: green">2</div>
    </div>

·列偏移：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--HTML注释：开发版本-->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
    <div>
<!--        <div class="col-xs-2" style="background-color: red">1</div>-->
        <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div>
    </div>
</body>
</html>

3.4 博客（面板+媒体对象+分页）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--HTML注释：开发版本-->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <style>
        .navbar{
            border-radius:0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</div>

<div class="container-fluid">
    <!--左边第一条对齐信息栏-->
    <div class="col-sm-9">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTA1YTk0MTVkZCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5MDVhOTQxNWRkIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Top aligned media</h4>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>
        <!--左边第二条对齐信息栏-->
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object" data-src="holder.js/64x64" alt="64x64"
                         src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PCEtLQpTb3VyY2UgVVJMOiBob2xkZXIuanMvNjR4NjQKQ3JlYXRlZCB3aXRoIEhvbGRlci5qcyAyLjYuMC4KTGVhcm4gbW9yZSBhdCBodHRwOi8vaG9sZGVyanMuY29tCihjKSAyMDEyLTIwMTUgSXZhbiBNYWxvcGluc2t5IC0gaHR0cDovL2ltc2t5LmNvCi0tPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PCFbQ0RBVEFbI2hvbGRlcl8xOTA1YTk0MTVkZCB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE5MDVhOTQxNWRkIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Top aligned media</h4>
                <p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.
                    Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi
                    vulputate fringilla. Donec lacinia congue felis in faucibus.</p>
                <p>Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque
                    penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>


        <!--左边下面的分页-->
        <ul class="pagination">
        <li>
          <a href="#" aria-label="Previous">
            <span aria-hidden="true">«</span>
          </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
          <a href="#" aria-label="Next">
            <span aria-hidden="true">»</span>
          </a>
        </li>
      </ul>

    </div>

    <!--右边第一个带标题的面板-->
    <div class="col-sm-3">
        <div class="panel panel-default">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                华为
            </div>
        </div>

        <!--右边第二个带标题的面板-->
        <div class="panel panel-primary">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                华为
            </div>
        </div>

        <!--右边第三个带标题的面板-->
        <div class="panel panel-danger">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                华为
            </div>
        </div>

    </div>
</div>

</body>
</html>

运行结果：

3.5 登录界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!--HTML注释：开发版本-->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <!--    画出一个居中的方框-->
    <style>
        .account{
            width: 500px;
            border: 1px solid #dddddd;
            border-radius:5px;
            box-shadow:5px 5px 20px #aaa;
            height: 300px;            <!--此处高度可以不要，因为其他元素和直接将高度撑起来-->

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;            <!--设置内边距:上下距离20px,左右距离40px-->
        }

        .account h1{
            margin-top: 10px;
            text-align: center;            <!--文本居中-->
        }
    </style>

</head>
<body>
<div class="account">
    <h1>用户登录</h1>
    <form>
        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="用户名">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="密码">
        </div>

        <button type="submit" class="btn btn-primary">登 录</button>
    </form>

</div>

</body>
</html>

运行结果：

3.6 后台管理界面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--HTML注释：开发版本-->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <style>


    </style>

</head>

<body>
<div class="navbar navbar-default">
    <!--    <div class="container-fluid">-->   <!--此时界面是平铺在网页上，改写成container则是居中放置-->
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">城市</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">武汉</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">西安</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">注册</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>                  <!-- /.container-fluid -->
</div>

<div class="container">
    <div class="btn-list">
        <input type="button" value="新 建" class="btn btn-primary"/>
    </div>
    <div style="margin-top:20px">
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>#</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Username</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
            </tbody>
        </table>


    </div>
</div>


</body>
</html>

运行结果：

3.7 后台管理+面板

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--HTML注释：开发版本-->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">

    <style>


    </style>

</head>

<body>
<div class="navbar navbar-default">

    <!--    <div class="container-fluid">-->   <!--此时界面是平铺在网页上，改写成container则是居中放置-->
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="#">城市</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">武汉</a></li>
            </ul>
            <ul class="nav navbar-nav">
                <li><a href="#">西安</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">注册</a></li>
            </ul>

            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">登录</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">表单区域</div>
        <div class="panel-body">
            <form class="form-inline">
                <div class="form-group">
                    <label class="sr-only" for="exampleInputEmail3">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
                </div>
                <div class="form-group">
                    <label class="sr-only" for="exampleInputPassword3">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
                </div>
                <button type="submit" class="btn btn-success">保存</button>
            </form>
        </div>
    </div><!-- /.container-fluid -->
</div>

<div class="panel panel-default">
    <div class="panel-heading">数据列表</div>
    <!--        <div class="panel-body">-->
    <!--            "注意：以下我们经过筛选出来的重要数据"-->
    <!--        </div>-->
    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>
                <button type="button" class="btn btn-primary btn-xs">编辑</button>
                <button type="button" class="btn btn-danger btn-xs">删除</button>
            </td>
        </tr>

        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>
                <button type="button" class="btn btn-primary btn-xs">编辑</button>
                <button type="button" class="btn btn-danger btn-xs">删除</button>
            </td>
        </tr>

        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>
                <button type="button" class="btn btn-primary btn-xs">编辑</button>
                <button type="button" class="btn btn-danger btn-xs">删除</button>
            </td>
        </tr>

        </tbody>
    </table>
    <!--分页-->

</div><!-- /.container-fluid -->

<nav aria-label="Page navigation">
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li>
            <a href="#" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
            </a>
        </li>
    </ul>
</nav>

<div class="container">
    <!--    <div class="btn-list">-->
    <!--        <input type="button" value="新 建" class="btn btn-primary"/>-->
    <!--    </div>-->
    <div style="margin-top:20px">
        <!--        <table class="table table-bordered table-striped table-hover">-->
        <!--            <thead>-->
        <!--            <tr>-->
        <!--                <th>#</th>-->
        <!--                <th>First Name</th>-->
        <!--                <th>Last Name</th>-->
        <!--                <th>Username</th>-->
        <!--            </tr>-->
        <!--            </thead>-->
        <!--            <tbody>-->
        <!--            <tr>-->
        <!--                <th scope="row">1</th>-->
        <!--                <td>Mark</td>-->
        <!--                <td>Otto</td>-->
        <!--                <td>@mdo</td>-->
        <!--            </tr>-->
        <!--            <tr>-->
        <!--                <th scope="row">2</th>-->
        <!--                <td>Jacob</td>-->
        <!--                <td>Thornton</td>-->
        <!--                <td>@fat</td>-->
        <!--            </tr>-->
        <!--            <tr>-->
        <!--                <th scope="row">3</th>-->
        <!--                <td>Larry</td>-->
        <!--                <td>the Bird</td>-->
        <!--                <td>@twitter</td>-->
        <!--            </tr>-->
        <!--            </tbody>-->
        <!--        </table>-->
    </div>


</div>


</body>
</html>

运行结果：

3.8 图标

·fontawesome组件需要下载和引入。

·引入：

  <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css">

·使用：

3.9  BootStrap依赖

·下载jQuery,在页面上应用上jQuery。

·在页面上应用BootStrap的js类库。

有梦想的小晨
关注
html设置div内容垂直居中,css让DIV元素或文字水平垂直居中的五种方法
weixin_32987379的博客
06-07 3059
div元素或文字水平垂直居中的5中方法第一种方法：使用top: 50%/left: 50%和translateX(-50%) translateY(-50%)；具体代码如下：.container {position: absolute;top: 50%;left: 50%;transform: translateX(-50%) translateY(-50%);}实例：如何让元素或文字水平垂直居...
CSS02_设置盒子水平+垂直居中 & 设置文本水平+垂直居中
linxwx的博客
02-22 9404
写在前面：让div中文字水平居中：text-align: center; 方法1. 在不知道div的宽高的情况下 采用absolute绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，便可达到水平+垂直居中效果 .center { position: absolute; top: 50%; left: 50%; /*-webkit
如何实现div中的文字垂直水平居中
weixin_43322018的博客
06-27 1万+
文字居中 文字水平垂直居中可以使用： //方法一 //设置line-height和div的height实现垂直居中，text-align实现水平居中 height: 50px; line-height: 50px； text-align: center; //方法二 //设置文字外的div的display为flex，设置主轴和交叉轴的值 //也可以设置其他的值让文字出现在想放的地方 display: flex; justify-content: center; align-i
5种div 内容水平垂直居中方法
热门推荐
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
让div水平垂直居中的六种方法
一只琪琪子的博客
09-04 6155
** 方法一：绝对定位方法：不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;） ** ** 方法二：绝对定位方法：确定了当前div的宽度，margin值为当前div宽度一半的负值。 ** ** 方法三：绝对定位方法：绝对定位下top left right bottom 都设...
实现div元素和文字水平及垂直居中的方法（超简单，适应各种场合）
qq_50737715的博客
11-12 7427
实现实现div元素和文字水平及垂直居中的方法如下： div元素水平居中：`style="margin:0 auto"` div元素垂直居中：`style="padding: (外层div的高-内层div的高)/2; background-clip:content-box; "` div文字水平居中：`外层div中style="text-align: center; "` div文字水平居中：`内层div中style="line-height: 外层div的高; "` 具体的代码展示（下面两种方法效果相同）
html+css基础学习入门教程标记语言——网页应用CSS样式
01-08
HTML和CSS是构建网页的基本工具，本教程将引导初学者入门这两种标记语言，重点在于如何在HTML中应用CSS样式。CSS（层叠样式表）的使用有四种主要方法，每种都有其适用场景和优缺点。 首先，我们来看第一种方法——...
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
04-23
【CSS基础学习】是网页设计领域中的重要环节，它是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS（层叠样式表）让网页设计者能够分离内容与表现，使得网页设计更加灵活且易于...
HTML5+CSS样式从入门到精通
11-27
本资源“HTML5+CSS样式从入门到精通”旨在为初学者提供一套全面的学习路径，帮助他们从零基础快速掌握这两项技术。 HTML5是超文本标记语言（HyperText Markup Language）的第五个版本，它在HTML4的基础上做了大量...
html&css入门基础知识点.pdf
10-04
CSS样式通常存储在样式表中，把样式添加到HTML 4.0中，是为了解决内容与表现分离的问题。 有以下三种方式来插入样式表： * 外部样式表：当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。 * 内部样式...
div水平垂直居中的七种方法
weixin_44330646的博客
03-02 4629
如何将div垂直水平居中？7个小妙招
如何实现一个div垂直居中（至少3种方法）
最新发布
yf18040578780的博客
09-11 4500
如何实现一个div垂直居中（至少3种方法）
如何将一个div水平垂直居中？6种方法做推荐
一键写代码的博客
06-04 5013
如何将一个div水平垂直居中？6种方法做推荐欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导...
CSS总结div中的内容垂直居中的六种方法
susunjia的博客
07-14 5019
CSS总结div中的内容垂直居中的六种方法
DIV水平垂直居中方法汇总
weixin_44941889的博客
11-10 502
@DIV水平垂直居中方法汇总 DIV水平垂直居中方法汇总 1、定位（子元素绝对定位，父元素相对定位），子元素的top和left值都设为50%，再让子元素往回走自身宽度和高度的一半。这里往回走一半可以有两种方式，通过margin或者translate都可以移动。 （1）通过margin的方式 这种方式的缺点在于我们需要知道当前子元素的宽高。 （2）通过translate的方式 通过以上两种方式均是让子元素移动自身的一半，如下图 2、定位（子元素绝对定位，父元素相对定位）绝对定位下top left rig
div中的内容垂直居中的五种方法
cetinlo的博客
05-28 2910
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和
CSS总结div中的内容垂直居中的五种方法
weixin_34342992的博客
09-14 3192
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它...
DIV内文字水平垂直居中
u012174809的专栏
01-05 2947
水平居中 text-align: center; 垂直居中 1.行高法 文字的行高和容器的高度相同 div { height:30px; line-height:30px; width:100px; overflow:hidden; } 2.内边距（padding）法 p { padding:20px 0; } 3.CSS3的transform来实现 .center-vertical{ position: relative; top:50%; transform:tra
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

有梦想的小晨

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值