此文章属于前端篇中的第二节CSS样式
继前期HTML标记语言

CSS总结笔记：

3.CSS样式

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

基础CSS，写简单页面&看懂&改。
模块、调整和修改

3.1CSS应用方法

1.在标签上

- 高度和宽度样式：
<img src="xxx" style="height:100px;" />
- 颜色样式：
<div style="color:red;">中国联通</div>

2.在head标签中写style标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        .c1{
            color:red;
        }
    </style>
</head>
<body>
    <h1 class='c1'>用户登录</h1>
    <form method="post" action="/login">
        <div>
            用户名：<input type="text" name="username">
        </div>
        <div>
            密码：<input type="password" name="password">
        </div>
        <input type="submit">
    </form>
</body>
</html>

3.写到文件中

.c1{
    height:100px;
}
.c2{
    color:red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="common.css" />
</head>
<body>
   
</body>
</html>

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

CSS文件：

.xx{
    color: green;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        .c1{
            color: red;
        }
        .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="password" name="password">
        </div>
        <input type="submit">
    </form>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="/static/commons.css">
</head>
<body>
<h1 class="xx">用户注册</h1>
<div>
    用户名：<input type="text">
</div>
<div>
    密码：<input type="password">
</div>

<div>
    性别：<input type="radio">男 <input type="radio">女
</div>

<div>
    爱好：
    <input type="checkbox">篮球
    <input type="checkbox">足球
    <input type="checkbox">乒乓球
</div>

<div>
    擅长的领域：
    <select multiple>
        <option>Python</option>
        <option>C++</option>
        <option>Java</option>
    </select>
</div>

<div>
    备注：<textarea></textarea>
</div>

<div>
    <input type="button" value="button按钮">
    <input type="submit" value="button按钮">
</div>

</body>
</html>

3.2CSS选择器

ID选择器（id）

#c2{
    color: gold;
}
<div id="c2">美国</div>

类选择器（class）

.c1{
    color: red;
}
<div class="c1">中国</div>

标签选择器

li{
    color: pink;
}
<ul>
    <li>北京</li>
    <li>上海</li>
    <li>深圳</li>
</ul>

属性选择器

input[type='text']{
            border: 1px solid red;
        }
        .v1[xx="456"]{
            color: gold;
        }

<div class="v1" xx="123">a</div>
<div class="v1" xx="456">b</div>
<div class="v1" xx="999">c</div>

后代选择器

无穷代：

.yy li{
	color: pink;
}

<div class="yy">
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

一代：

.yy > a{
    color: blue;
}

<div class="yy">
    <a>百度</a>
    <div>
        <a>谷歌</a>
    </div>
    <ul>
        <li>美国</li>
        <li>日本</li>
        <li>韩国</li>
    </ul>
</div>

关于选择器：

使用频率多：类选择器、标签选择器、后代选择器
使用频率少：属性选择器、ID选择器

关于多个样式覆盖问题：

若样式重复，style最后一个样式为最终样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

若不想覆盖（加入! important）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red !important;
            border: 1px solid red;
        }
        .c2{
            font-size: 28px;
            color: green;
        }
    </style>
</head>
<body>
    <div class="c1 c2">中国联通</div>
</body>
</html>

3.4样式

1.高度和宽度

.c1{
    height: 300px;
    width: 500px;
}

注意：宽度，支持百分比。

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>
</body>
</html>

块级和行内标签的转换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="display: inline-block">中国</div>
    <span style="display:block;">联通</span>
</body>
</html>

高频率：块级+块级&行内。

3.字体和颜色

color：颜色
font-size：大小
font-weight：加粗
font-family：字体格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            color: red;
            font-size: 18px;
            font-weight: 500;
            font-family: Microsoft YaHei UI;
        }
    </style>
</head>
<body>
    <div class="c1">中国联通</div>
    <div>中国移动</div>
</body>
</html>

4.文字对齐方式

<!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>

5.浮动

<!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: 200px;
            height: 170px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
  <div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
  </div>
</body>
</html>

如果标签浮动起来，就会脱离文档流。

解决：

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

6.内边距

<!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;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div style="background-color: gold">刘备</div>
        <div>
            汉景帝第十九代玄孙
        </div>
    </div>
</body>
</html>

7.外边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="height: 200px;background-color: dodgerblue"></div>
    <div style="background-color: red;height: 100px;margin-top: 10px;"></div>
</body>
</html>

案例：小米商城（导航条）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 38px;
            color: #b0b0b0;
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
            height: 38px;
        }
        .header .account{
            float: right;
            color: white;
            height: 38px;
            line-height: 38px;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;
        }

    </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>

总结

body标签，默认有一个边距，造成页面四边都有白色间隙，如何去除？
```
body{
	margin: 0;
}
```

内容居中

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

<div style="width: 200px; text-align: center">刘备</div>

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

.container{
    width: 980px;
    margin: 0 auto;
}
<div class="container">xxx</div>

父级没有高度或者宽度，被本级支撑起来。
若存在浮动，一定记得加入<div style="clear: both"></div>

案例：小米商城二级菜单

1.骨架部分

<!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: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
        .sub-header .ht{
            height: 88px;
        }
        .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">abc</div>
        <div class="ht menu-list">abc</div>
        <div class="ht search">asd</div>
        <div style="clear:both"></div>
    </div>
</div>
</body>
</html>

2.logo部分

<!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: 1226px;
            margin-right: auto;
            margin-left: auto;
        }
        .sub-header .ht{
            height: 88px;
        }
        .sub-header .logo{
            width: 234px;
            float: left;
        }
        .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;
        }
        .sub-header .search{
            float: right;
        }
    </style>
</head>
<body>
<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置为高度、边距无效。 -> 块级 -->
            <a href="https://www.mi.com/">
                <img src="/images/logo-mi2.png">
            </a>
        </div>
        <div class="ht menu-list">abc</div>
        <div class="ht search">asd</div>
        <div style="clear:both"></div>
    </div>
</div>
</body>
</html>

3.菜单部分

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

        .sub-header{
            height: 100px;
        }

        .container{
            width: 1226px;
            margin-right: auto;
            margin-left: 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 a img{
            height: 56px;width: 56px;
        }

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

        .sub-header .menu-list a{
            padding: 0 10px;
            display: inline-block;
            color: #333;
            font-size: 16px;
            /*去掉链接下划线*/
            text-decoration: none;
        }

        /*hover当鼠标悬停*/
        .sub-header .menu-list a:hover{
            color: darkorange;
        }

        .sub-header .search{
            float: right;
        }
    </style>
</head>
<body>
<div class="sub-header">
    <div class="container">
        <div class="ht logo">
            <!-- a，行内标签；默认设置为高度、边距无效。 -> 块级 -->
            <a href="https://www.mi.com/">
                <img src="/images/logo-mi2.png">
            </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 style="clear:both"></div>
    </div>
</div>
</body>
</html>

4.顶部菜单+二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 38px;
            color: #b0b0b0;
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
            height: 38px;
        }
        .header .account{
            float: right;
            color: white;
            height: 38px;
            line-height: 38px;

            text-decoration: none;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }
        .header .account:hover{
            color: white;
        }
        .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 a img{
            height: 56px;width: 56px;
        }

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

        .sub-header .menu-list a{
            padding: 0 10px;
            display: inline-block;
            color: #333;
            font-size: 16px;
            /*去掉链接下划线*/
            text-decoration: none;
        }

        /*hover当鼠标悬停*/
        .sub-header .menu-list a:hover{
            color: darkorange;
        }

        .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，行内标签；默认设置为高度、边距无效。 -> 块级 -->
            <a href="https://www.mi.com/">
                <img src="/images/logo-mi2.png">
            </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 style="clear:both"></div>
    </div>
</div>

</body>
</html>

小结

a标签是行内标签，行内标签的高度、内外边距，默认无效。
垂直方向居中
- 文本：line-height
- 图片：边距
a标签默认有下划线。（去除：text-decoration: none;）
鼠标放上去之后（hover）
```
a:hover{
	color: white;
}
```

案例：小米商城推荐区域

若想还原，图片部分自行加入

<!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;
        }

        .header{
            height: 38px;
            color: #b0b0b0;
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
            height: 38px;
        }
        .header .account{
            float: right;
            color: white;
            height: 38px;
            line-height: 38px;

            text-decoration: none;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }
        .header .account:hover{
            color: white;
        }
        .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 a img{
            height: 56px;width: 56px;
        }

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

        .sub-header .menu-list a{
            padding: 0 10px;
            display: inline-block;
            color: #333;
            font-size: 16px;
            /*去掉链接下划线*/
            text-decoration: none;
        }

        /*hover当鼠标悬停*/
        .sub-header .menu-list a:hover{
            color: darkorange;
        }

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

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

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

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

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

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

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

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

        .news{
            margin-top: 14px;
        }



    </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，行内标签；默认设置为高度、边距无效。 -> 块级 -->
            <a href="https://www.mi.com/">
                <img src="/images/logo-mi2.png">
            </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 style="clear:both"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="/images/b1.png">
        </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/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div style="clear: both"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="/images/list1.png" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/list2.png" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/list3.png" />
        </div>
        <div style="clear: both"></div>
    </div>
</div>

</body>
</html>

在这里插入图片描述

设置透明度：

.c1{
    opacity: 1;
}

CSS知识点

hover

鼠标悬停显示图片

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

        .download{
            display: none;
        }

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

    </style>
</head>
<body>
    <div class="c1">移动</div>
    <div class="c2">联通</div>

    <div class="app">
        <div>点击下载</div>
            <div class="download">
                <img src="/images/app.png">
            </div>
    </div>
</body>
</html>

after

c1样式后都加入content内容

<!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>
    <div class="c1">赵云</div>
    <div class="c1">黄忠</div>
    <div class="c1">马超</div>
</body>
</html>

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

position

fixed
relative
absolute

1.fiex

固定在窗口的某个位置

案例：固定客服电话位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #b0b0b0;
            height: 2000px;
            width: 1226px;
            margin: 0 auto;
        }

        .c2{
            position: fixed;
            border: 2px solid red;
            height: 64px;
            width: 64px;

            right: 10px;
            bottom: 100px;
        }
    </style>
</head>
<body>
    <div class="c1"></div>
    <div class="c2">客服电话</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eLO61OeU-1674037685954)(C:/Users/lq/AppData/Roaming/Typora/typora-user-images/image-20230118165015951.png)]

案例：对话框

z-index：定义position在哪一层，数值越大在越上层

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: #b0b0b0;
            height: 2000px;
            width: 1226px;
            margin: 0 auto;
        }

        .c2{
            position: fixed;
            left: 0;
            right: 0;
            margin: 0 auto;
            height: 500px;
            width: 400px;
            background-color:  white;
            top: 200px;
            z-index: 10;
        }

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

    </style>
</head>
<body>
    <!--背景-->
    <div class="c1"></div>
    <!--幕布-->
    <div class="mask"></div>
    <!--对话框-->
    <div class="c2"></div>
</body>
</html>

在这里插入图片描述

2.relative和absolute

相对进行显示：

父类加上position:relative

子类加上position:absolute

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

        .c1 .c2{
            background-color: gold;
            position: absolute;
            height: 100px;
            width: 100px;
            right: 0;
        }
    </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>
        body{
            margin: 0;
        }

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

        .left{
            float: left;
        }

        .header{
            height: 38px;
            color: #b0b0b0;
            background: #333;
        }
        .container{
            width: 1226px;
            margin: 0 auto;
        }
        .header .menu{
            float: left;
            color: white;
            height: 38px;
        }
        .header .account{
            float: right;
            color: white;
            height: 38px;
            line-height: 38px;

            text-decoration: none;
        }
        .header a{
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right: 10px;

            text-decoration: none;
        }
        .header .account:hover{
            color: white;
        }
        .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 a img{
            height: 56px;width: 56px;
        }

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

        .sub-header .menu-list a{
            padding: 0 10px;
            display: inline-block;
            color: #333;
            font-size: 16px;
            /*去掉链接下划线*/
            text-decoration: none;
        }

        /*hover当鼠标悬停*/
        .sub-header .menu-list a:hover{
            color: darkorange;
        }

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

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

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

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

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

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

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

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

        .news{
            margin-top: 14px;
        }

        .app{
            position: relative;
        }

        .app .download{
            position: absolute;
            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/">开放平台</a>
            <a href="https://www.mi.com/" class="app">App下载
            <div class="download">
                <img src="images/app.png">
            </div>
            </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，行内标签；默认设置为高度、边距无效。 -> 块级 -->
            <a href="https://www.mi.com/">
                <img src="/images/logo-mi2.png">
            </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 style="clear:both"></div>
    </div>
</div>

<div class="slider">
    <div class="container">
        <div class="sd-img">
            <img src="/images/b1.png">
        </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/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>
            <div class="item">
                <a href="https://www.mi.com/">
                    <img src="/images/c1.png" >
                    <span>保障服务</span>
                </a>
            </div>

            <div style="clear: both"></div>
        </div>
        <div class="list-item left" style="margin-left: 14px">
            <img src="/images/list1.png" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/list2.png" />
        </div>
        <div class="list-item left" style="margin-left: 15px">
            <img src="/images/list3.png" />
        </div>
        <div style="clear: both"></div>
    </div>
</div>

</body>
</html>