二、css

Ling_Ze2024-03-04 9:12

css

css

今日概要：

  • 案例应用（利用之前所学知识）
  • css知识点
  • 模板 + css + 构建页面

1.css案例

1.1 内容回顾

  • HTML标签

    复制代码 
    固定格式，记住标签长什么样子。例如：
h/div/span/a/img/ul/li/table/input/form

  • css样式

    • 引用css：标签、头部、文件

      复制代码 
      .xx{
	...
}

<div class='xx xx'></div>

    • css样式

      复制代码 
      高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距：
	- body
	- 区域居中

    • 页面布局

      复制代码 
      根据你看到的页面把他们划分成很多的小区域，再去填充样式。

1.2 案例：二级菜单

1.2.1 划分区域
1.2.2 搭建骨架
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .sub-header{
            height: 100px;
            background-color: #b0b0b0;
        }
        .container{
            width: 1128px;
            margin: 0 auto;

        }
        .sub-header .ht{
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
        }
        .sub-header .menu-list{
            float: left;
        }
        .sub-header .search{
            float: right;
        }
    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="ht logo">f</div>
            <div class="ht menu-list">f</div>
            <div class="ht search">f</div>
            <div class="clear:both"></div>
        </div>
    </div>
</body>
</html>
1.2.3 Logo区域
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .sub-header {
            height: 100px;
            background-color: #b0b0b0;
        }

        .container {
            width: 1128px;
            margin: 0 auto;

        }

        .sub-header .ht {
            height: 100px;
        }

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

        .sub-header .menu-list {
            float: left;
        }

        .sub-header .search {
            float: right;
        }
    </style>
</head>
<body>
<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!--a，行内标签；默认设置高度、边距无效。 方法：1、块级  2、行内+块级-->
            <a href="https://www.mi.com/">
                <img src="images/mi.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">f</div>
        <div class="ht search">f</div>
        <div class="clear:both"></div>
    </div>
</div>
</body>
</html>
1.2.4 菜单部分
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        .sub-header {
            height: 100px;
        }

        .container {
            width: 1128px;
            margin: 0 auto;

        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo img{
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 20px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }

        .sub-header .search {
            float: right;
        }
    </style>
</head>
<body>
<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!--a，行内标签；默认设置高度、边距无效。 方法：1、块级  2、行内+块级-->
            <a href="https://www.mi.com/">
                <img src="images/mi.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi手机</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search">f</div>
        <div class="clear:both"></div>
    </div>
</div>
</body>
</html>

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

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

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

        .header {
            background-color: #333;
        }

        .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: 10px;

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

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo img{
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 20px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }

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

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


<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!--a，行内标签；默认设置高度、边距无效。 方法：1、块级  2、行内+块级-->
            <a href="https://www.mi.com/">
                <img src="images/mi.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi手机</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search">f</div>
        <div class="clear:both"></div>
    </div>
</div>

</body>
</html>
小结

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

  • 垂直方向居中

    • 文本 + line-height
    • 图片 + 边距

  • a标签默认有下划线。

  • 鼠标放上去之后hover

    复制代码 
    .cl:hover{
	...
}
a:hover{

}

1.4 案例：推荐区域

1.4.1 划分区域
1.4.2 搭建骨架
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

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

        .header {
            background-color: #333;
        }

        .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: 10px;

            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;
        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block;
        }

        .sub-header .logo img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 20px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

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

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

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

    </style>
</head>
<body>

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

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!--a，行内标签；默认设置高度、边距无效。 方法：1、块级  2、行内+块级-->
            <a href="https://www.mi.com/">
                <img src="images/mi.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi手机</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="images/b1.jpg" 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>
1.4.3 案例的实现
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .left {
            float: left;
        }

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

        .header {
            background-color: #333;
        }

        .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: 10px;

            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;
        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block;
        }

        .sub-header .logo img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 20px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

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

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

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

        .news {
            margin-top: 14px;
        }

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

        .news .channel .item {
            width: 76px;
            height: 82px;
            float: left;
            text-align: center;
        }

        .news .channel .item a {
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color: #fff;
            text-decoration: none;
            opacity: 0.7;
        }

        .news .channel .item a:hover {
            opacity: 1;
        }

        .news .channel .item img {
            width: 24px;
            height: 24px;
            display: block;
            margin: 0 auto 4px;
        }

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

    </style>
</head>
<body>

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

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!--a，行内标签；默认设置高度、边距无效。 方法：1、块级  2、行内+块级-->
            <a href="https://www.mi.com/">
                <img src="images/mi.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi手机</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both"></div>
    </div>
</div>

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

<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="clear:both"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="images/w1.jpg" alt="">
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w2.jpg" alt="">
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w3.jpg" alt="">
        </div>
        <div class="clear:both"></div>
    </div>
</div>

</body>
</html>
小结

  • 设置透明度

    复制代码 
    opacity:0.5;    值为0到1之间

2.css知识点

2.1hover（伪类）

html 复制代码 
<!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: 3px 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/qcode.png" alt="">
        </div>
    </div>
</body>
</html>

2.2after（伪类）

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1:after {
            content: "大帅哥";
        }
    </style>
</head>
<body>
<div class="c1">刘德华</div>
<div class="c1">黎明</div>
</body>
</html>

很重要的应用

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }
        .item{
            float: left;
        }
    </style>
</head>
<body>
<div class="clearfix">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>
</body>
</html>

2.3position

  • fixed
  • relative
  • absolute
1.fixed

固定在窗口的某个位置

案例：返回顶部
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;

            right: 10px;
            bottom: 50px;
        }

    </style>
</head>
<body>

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

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

</body>
</html>
案例：对话框
html 复制代码 
<!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">sdgiosjgo</div>

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

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


</body>
</html>
2.relative和absolute
html 复制代码 
<!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: green;
            position: absolute;
            right: 20px;
            bottom: 10px;
        }
    </style>
</head>
<body>
<div class="c1">
    <div class="c2"></div>

</div>
</body>
</html>
案例：小米商城下载app
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

        .left {
            float: left;
        }

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

        .header {
            background-color: #333;
        }

        .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: 10px;

            text-decoration: none;
        }

        .header a:hover {
            color: white;
        }

        .sub-header {
            height: 100px;
        }

        .sub-header .ht {
            height: 100px;
        }

        .sub-header .logo {
            width: 234px;
            float: left;
        }

        .sub-header .logo a {
            margin-top: 22px;
            display: inline-block;
        }

        .sub-header .logo img {
            height: 56px;
            width: 56px;
        }

        .sub-header .menu-list {
            float: left;
            line-height: 100px;
        }

        .sub-header .menu-list a {
            display: inline-block;
            padding: 0 20px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }

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

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

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

        .news {
            margin-top: 14px;
        }

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

        .news .channel .item {
            width: 76px;
            height: 82px;
            float: left;
            text-align: center;
        }

        .news .channel .item a {
            display: inline-block;
            font-size: 12px;
            padding-top: 18px;
            color: #fff;
            text-decoration: none;
            opacity: 0.7;
        }

        .news .channel .item a:hover {
            opacity: 1;
        }

        .news .channel .item img {
            width: 24px;
            height: 24px;
            display: block;
            margin: 0 auto 4px;
        }

        .news .list-item {
            width: 316px;
            height: 170px;
        }
        .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/">小米商城</a>
            <a href="https://www.mi.com/">MIUI</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/" class="app">下载app
                <div class="download">
                    <img src="images/qcode.png" alt="">
                </div>
            </a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">有品</a>
            <a href="https://www.mi.com/">开放平台</a>
        </div>
        <div class="account">
            <a href="https://www.mi.com/">登录</a>
            <a href="https://www.mi.com/">注册</a>
            <a href="https://www.mi.com/">消息通知</a>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!--a，行内标签；默认设置高度、边距无效。 方法：1、块级  2、行内+块级-->
            <a href="https://www.mi.com/">
                <img src="images/mi.png" alt="">
            </a>
        </div>
        <div class="ht menu-list">
            <a href="https://www.mi.com/">Xiaomi手机</a>
            <a href="https://www.mi.com/">Redmi手机</a>
            <a href="https://www.mi.com/">电视</a>
            <a href="https://www.mi.com/">笔记本</a>
            <a href="https://www.mi.com/">平板</a>
        </div>
        <div class="ht search"></div>
        <div class="clear:both"></div>
    </div>
</div>

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

<div class="news">
    <div class="container">
        <div class="channel left">
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="images/v1.png" alt="">
                    <span>保障服务</span>
                </a>
            </div>
            <div class="clear:both"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="images/w1.jpg" alt="">
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w2.jpg" alt="">
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="images/w3.jpg" alt="">
        </div>
        <div class="clear:both"></div>
    </div>
</div>

</body>
</html>

2.4border

html 复制代码 
<!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 #00FF00;
            margin: 100px;
        }

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

透明色

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
            border-left: 2px solid transparent;
        }
        .c1:hover{
            border-left: 2px solid red;
        }

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

2.5背景色

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1 {
            height: 50px;
            width: 500px;
            margin: 100px;
            background-color: #5f5750;
        }
        
    </style>
</head>
<body>
<div class="c1">菜单</div>
</body>
</html>

注意：以上不是所有的css样式

总结

至此，css部分的知识全部讲完。

  • 大家：大致了解了页面的样式和标签。
  • 模板：
    • 模板的基本使用逻辑。
    • 模板 + 自己css知识点（开发页面）

3.BootStrap

是别人帮我们已写好的css样式，我们如果想要使用这个BootStrap：

  • 下载BootStrap
  • 使用
    • 在页面上引入BootStrap
    • 编写HTML时，按照BootStrap的规定来编写 + 自定制。

3.1 初识

https://v3.bootcss.com/

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发版本-->
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">

    <!-- 生产版本-->
    <!-- <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">-->
</head>
<body>
    <input type="button" value="提交">

    <input type="button" value="提交" class="btn btn-primary">
    <input type="button" value="提交" class="btn btn-success">
    <input type="button" value="提交" class="btn btn-danger">
    <input type="button" value="提交" class="btn btn-danger btn-xs">
</body>
</html>

3.2 导航

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/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="#">中国联通</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="#">广西 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">上海</a></li>
                <li><a href="#">北京</a></li>
                <li><a href="#">深圳</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 栅格系统

https://v3.bootcss.com/css/#grid

  • 把整体划分为了12格

  • 分类

    • 响应式，根据屏幕宽度不同

      复制代码 
      .col-lg-    1170px
.col-md-    970px
.col-sm-    750px

    • 非响应式

      html 复制代码 
      <div class="col-xs-6" style="background-color: red">1</div>
<div class="col-xs-6" style="background-color: green">2</div>
    复制代码

  • 列偏移

    html 复制代码 
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
</head>
<body>
    <div class="col-sm-offset-2 col-sm-6" style="background-color: green">2</div>
</body>
</html>

3.4 container

html 复制代码 
<div class="container-fluid">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>
html 复制代码 
<div class="container">
    <div class="col-sm-9">左边</div>
    <div class="col-sm-3">右边</div>
</div>

3.5 面板

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/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="#">中国联通</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="#">广西 <span class="sr-only">(current)</span></a></li>
                <li><a href="#">上海</a></li>
                <li><a href="#">北京</a></li>
                <li><a href="#">深圳</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+PCFbQ0RBVEFbI2hvbGRlcl8xOGUwMmIwZGZjMSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZTAyYjBkZmMxIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                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.
            </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+PCFbQ0RBVEFbI2hvbGRlcl8xOGUwMmIwZGZjMSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZTAyYjBkZmMxIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                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.
            </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+PCFbQ0RBVEFbI2hvbGRlcl8xOGUwMmIwZGZjMSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZTAyYjBkZmMxIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                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.
            </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+PCFbQ0RBVEFbI2hvbGRlcl8xOGUwMmIwZGZjMSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZTAyYjBkZmMxIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                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.
            </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+PCFbQ0RBVEFbI2hvbGRlcl8xOGUwMmIwZGZjMSB0ZXh0IHsgZmlsbDojQUFBQUFBO2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1mYW1pbHk6QXJpYWwsIEhlbHZldGljYSwgT3BlbiBTYW5zLCBzYW5zLXNlcmlmLCBtb25vc3BhY2U7Zm9udC1zaXplOjEwcHQgfSBdXT48L3N0eWxlPjwvZGVmcz48ZyBpZD0iaG9sZGVyXzE4ZTAyYjBkZmMxIj48cmVjdCB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSIxMy4xNzMwMDQxNTAzOTA2MjUiIHk9IjM2LjUiPjY0eDY0PC90ZXh0PjwvZz48L2c+PC9zdmc+"
                         data-holder-rendered="true" style="width: 64px; height: 64px;">
                </a>
            </div>
            <div class="media-body">
                <h4 class="media-heading">Media heading</h4>
                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.
            </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">
                Panel content
            </div>
        </div>
        <div class="panel panel-primary">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
        <div class="panel panel-danger">
            <div class="panel-heading">最新推荐</div>
            <div class="panel-body">
                Panel content
            </div>
        </div>
    </div>
</div>

</body>
</html>

案例

案例：登录

  • 宽度 + 居中 （区域居中）

  • 内边距

  • 表单

完成效果
代码
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .account{
            height: 300px;
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            /*上下20 左右40*/
            padding: 20px 40px;

        }
        .account h2{
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="account">
    <h2>用户登录</h2>
    <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>

案例：后台管理

  • 导航

  • 新建，按钮。

  • 表格

完成效果
代码
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <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="#">中国联通xx系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">广西 </a></li>
                <li><a href="#">上海</a></li>

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

            </ul>
        </div>
    </div>
</div>

<div class="container">
    <div>
        <input type="button" value="新 建" class="btn btn-primary">
    </div>
    <div style="margin-top: 20px">
        <table class="table table-bordered 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>

案例：后台管理 + 面板

完成效果
代码
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <style>
        .navbar {
            border-radius: 0;
        }
    </style>
</head>
<body>
<div class="navbar navbar-default">
    <div class="container">
        <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="#">中国联通xx系统</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="#">广西 </a></li>
                <li><a href="#">上海</a></li>

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

            </ul>
        </div>
    </div>
</div>

<div class="container">
    <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>

    <div class="panel panel-default">
        <div class="panel-heading">数据列表</div>
        <!--        <div class="panel-body">-->
        <!--            注意：以下是我们经过筛选出来的重要数据。-->
        <!--        </div>-->

        <table class="table table-bordered 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>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>
                    <a class="btn btn-primary btn-xs">编辑</a>
                    <a class="btn btn-danger btn-xs">删除</a>
                </td>
            </tr>
            </tbody>
        </table>
    </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>

</body>
</html>

3.6 图标

  • bootstrap提供，不多

  • fontawesome组件

    复制代码 
    https://fontawesome.dashgame.com/

    • 下载

    • 引入

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

    • 使用


示例见：

  • 博客

  • 后台管理 + 面板

3.7 BootStrap依赖

BootStrap依赖JavaScript的类库，jQuery。

  • 下载jQuery，在页面上应用上jQuery。

  • 在页面上应用bootstrap的JavaScript类库。

4.提前聊JavaScript

  • HTML，裸体

  • css，好看

  • JavaScript，动态

    • 编程语言
    • 类库（模块）【jQuery是JavaScript的类库】
相关推荐
码农黛兮_4610 分钟前
CSS3 基础知识、原理及与CSS的区别
前端·css·css3
水银嘻嘻33 分钟前
web 自动化之 Unittest 四大组件
运维·前端·自动化
(((φ(◎ロ◎;)φ)))牵丝戏安38 分钟前
根据输入的数据渲染柱形图
前端·css·css3·js
wuyijysx1 小时前
JavaScript grammar
前端·javascript
溪饱鱼1 小时前
第6章: SEO与交互指标
服务器·前端·microsoft
咔_1 小时前
LinkedList详解（源码分析）
前端
逍遥德2 小时前
CSS可以继承的样式汇总
前端·css·ui
读心悦2 小时前
CSS3 选择器完全指南：从基础到高级的元素定位技术
前端·css·css3
_龙衣3 小时前
将 swagger 接口导入 apifox 查看及调试
前端·javascript·css·vue.js·css3
进取星辰4 小时前
25、Tailwind：魔法速记术——React 19 样式新思路
前端·react.js·前端框架
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03KGG转MP3工具|非KGM文件|解密音频04DeepSeek各版本说明与优缺点分析05【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！06Coze扣子平台完整体验和实践（附国内和国际版对比）07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09苍穹外卖面试总结10VMware虚拟机安装Win7专业版保姆级教程（附镜像包）