我家小花儿

这个屌丝很懒，什么也没留下！

热门标签

移动web

作者：我家小花儿 | 2024-03-20 04:57:16

踩

移动web

1 字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

字体图标
- 字体图标展示的是图标，本质是字体。
- 处理简单的、颜色单一的图片

下载字体包：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //将下载好的iconfont包放到同一目录下,并引入
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>
<body>
    <i class="iconfont icon-favorites-fill">    //引入具体选用图标的类名
    </i>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: #333;
            text-decoration: none;
        }

        .nav {
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }
        .icon-cart-Empty-fill {
            color: #f40;
        }
    </style>
</head>

<body>

    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

2 平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换
- 改变盒子在平面内的形态（位移、旋转、缩放）
- 2D转换
平面转换属性
- transform

位移

目标：使用translate实现元素位移效果

语法
- transform: translate(水平移动距离, 垂直移动距离);
取值（正负均可）
- 像素单位数值
- 百分比（参照物为盒子自身尺寸）
- 注意：X轴正向为右，Y轴正向为下
技巧
- translate()如果只给出一个值, 表示x轴方向移动距离
- 单独设置某个方向的移动距离：translateX() & translateY()

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        .son {
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 1s;   /* 延迟移动时间 */
        }
        .father:hover .son {
           /*  transform: translate(100px, 50px); */   /* 鼠标放上去后的移动位置 */
            transform: translate(100%, 50%);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

2.1 位移-绝对定位居中

目标：使用translate快速实现绝对定位的元素居中效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }

        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 绝对位置定位 */
            /* margin-left: -100px;
            margin-top: -50px; */
            /* 基础写法 */

            /* 进阶写法 */
            transform: translate(-50%, -50%);

            width: 200px;
            height: 100px;
            background-color: pink;

        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

3 案例

目标：使用translate实现元素位移效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url(./images/bg.jpg);
            /* 超出范围之外的全部隐藏 */
            overflow: hidden;
        }

        /* 行内样式，加宽，加高不生效 */
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all 0.5s;
        }
        .box::after {
            background-position: right 0;
        }
        /* 鼠标移入位置改变效果 */
        .box:hover::before {
            transform: translate(-100%,0);
        }
        .box:hover::after {
            transform: translate(100%,0);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

4 旋转

目标：使用rotate实现元素旋转效果

语法
- transform: rotate(角度);
- 注意：角度单位是deg
技巧：取值正负均可
- 取值为正, 则顺时针旋转
- 取值为负, 则逆时针旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 250px;
            transition: all 0.5s;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images//rotate.png" alt="">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

转换原点：目标：使用transform-origin属性改变转换原点

语法
- 默认圆点是盒子中心点
- transform-origin: 原点水平位置原点垂直位置;

取值

方位名词（left、top、right、bottom、center）（常用）
像素单位数值
百分比（参照盒子自身尺寸计算）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 250px;
            transition: all 0.5s;
            transform-origin: right bottom;  /* 转换旋转圆心 */
            border: 1px solid #000;
        }
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images//rotate.png" alt="">
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5 多重转换

目标：使用transform复合属性实现多形态转换

多重转换技巧

transform: translate(600px) rotate(720deg);
1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        img {
            width: 200px;
            transition: all 8s;
        }
        .box:hover img {
            transform: translate(600px) rotate(720deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/tyre1.png" alt="">
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

6 缩放

目标：使用scale改变元素的尺寸

语法

transform: scale(x轴缩放倍数, y轴缩放倍数); （一般只写一个数字）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
        }
        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        .box:hover img {
            /* transform: scale(1.2); */   /* 大于1表示放大，小于1表示缩小，等于1表示不放大不缩小 */
            transform: scale(0.8);
        }

    </style>
</head>
<body>
    <div class="box">
        <img src="./images/product.jpg" alt="">
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        img {
            width: 100%;
        }

        .box {
            width: 249px;
            height: 210px;
            margin: 50px auto;
            overflow: hidden;
            transition: all 2s;
            overflow: hidden;
        }
        
        .box p {
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }

        .box .pic {
            position: relative;
            
        }
        .box .pic::after {
            position: absolute;
            left: 50%;
            top: 50%;
            /* 第一种 */
            /* margin-left: -29px;
            margin-top: -29px; */
            /* 第二种 不能单独出现，会被下面出现的层叠掉*/
            /* transform: translate(-50%, -50%); */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images//play.png);
            /* 大图 */
            transform: translate(-50%, -50%) scale(5);
            /* 看不见 */
            opacity: 0;
            transition: all .5s;
            
        }
        .box li:hover .pic::after {
            /* 小图 */
            transform:  translate(-50%, -50%) scale(1);
            /* 看得见 */
            opacity: 1;
        }

      
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/party.jpeg" alt=""></div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cdOl5AFx-1650960101487)(https://gitee.com/silverljh/typora-two/raw/master/image/202204011631552.png)]

鼠标放上去

7 渐变

7.1 渐变背景

目标：使用background-image属性实现渐变背景效果

渐变是多个颜色逐渐变化的视觉效果

一般用于设置盒子的背景

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 200px;
            /* background-image: linear-gradient(
                pink,green,blue
            ); */
            background-image: linear-gradient(
                /* 全透明黑色类似于rgba(0,0,0,0) */
                transparent,
                rgba(0,0,0,.6)
            );
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

小案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品展示效果</title>
    <style>
        .box {
            position: relative;
        }
        
        .box img {
            width: 300px;
        }
        
        .box .title {
            position: absolute;
            left: 15px;
            bottom: 20px;
            /* 层级 */
            z-index: 2;
            width: 260px;
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }

        .box .mask {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            width: 300px;
            height: 212px;
            background-image: linear-gradient(
                transparent,
                rgba(0,0,0,.6)
            );
            transition: all .5s;
        }
        .box:hover .mask {
            opacity: 1;
        }
        
    </style>
</head>

<body>

    <div class="box">
        <img src="./images/product.jpeg" alt="">
        <div class="title">OceanStor Pacific 海量存储斩获2021 Interop金奖</div>
        <!-- 渐变背景 mask -->
        <div class="mask"></div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

鼠标放上去：

8 综合案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为新闻</title>
    <link rel="stylesheet" href="./css/demo.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/product.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>产品</h4>
                        <h5>OceanStor Pacific 海量存储斩获2021 Interop金奖</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right"></i>
                        </p>
                    </div>

                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei1.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>行业洞察</h4>
                        <h5>迈向智能世界2030</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right"></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
            <li>
                <a href="#">
                    <div class="pic">
                        <img src="./images/huawei2.jpeg" alt="">
                    </div>
                    <div class="txt">
                        <h4>《ICT新视界》刊首语</h4>
                        <h5>笃行致远，共建具有获得感、幸福感、安全感的智慧城市</h5>
                        <p>
                            <span>了解更多</span>
                            <i class="iconfont icon-arrow-right"></i>
                        </p>
                    </div>
                    <!-- 添加渐变背景 -->
                    <div class="mask"></div>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

鼠标放上去

9 空间转换

空间转换

目标：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
空间转换也叫3D转换
属性：transform
语法
- transform: translate3d(x, y, z);
- transform: translateX(值);
- transform: translateY(值);
- transform: translateZ(值);
取值（正负均可）
- 像素单位数值
- 百分比

9.1 透视

目标：使用perspective属性实现透视效果

属性（添加给父级）
- perspective: 值;
- 取值：像素单位数值，数值一般在800 – 1200。
- 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

作用

空间转换时，为元素添加近大远小、近实远虚的视觉效果

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>透视效果</title>
  <style>
    body {
      perspective: 1000px;
      /* perspective: 200px; */
      /* perspective: 10000px; */
    }

    .box {
      width: 200px;
      height: 200px;
      margin: 100px auto;
      background-color: pink;
      transition: all 0.5s;
    }

    .box:hover{
      transform: translateZ(200px);
      /* transform: translateZ(-200px); */
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

9.2 空间旋转

目标：使用rotate实现元素空间旋转效果

语法

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空间旋转-Z轴</title>
    <style>
        .box {
            width: 300px;
            margin: 100px auto;
            perspective: 1000px;
        }

        img {
            width: 300px;
            transition: all 2s;
        }

        .box img:hover {
            transform: rotateY(360deg);  //绕y轴旋转
            transform: rotateX(360deg);  //绕x轴旋转
            transform: rotateZ(360deg);  //绕z轴旋转
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./images/hero.jpeg" alt="">
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

目标：使用rotate实现元素空间旋转效果

拓展（仅作为了解）
- rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
- x，y，z 取值为0-1之间的数字

9.3 立体呈现

目标：使用transform-style: preserve-3d呈现立体图形

实现方法
- 添加 transform-style: preserve-3d;
- 使子元素处于真正的3d空间
呈现立体图形步骤
- 盒子父元素添加transform-style: preserve-3d；
- 按需求设置子盒子的位置（位移或旋转）
注意
- 空间内，转换元素都有自已独立的坐标轴，互不干扰

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立体呈现</title>
    <style>
        .cube {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */
            transition: all 2s;
            transform-style: preserve-3d;  /* 开启3d效果 */
        }

        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }

        .front {
            background-color: orange;
            /* 向我走近200px */
            transform: translateZ(200px);
        }

        .back {
            background-color: green;
        }

        /* cube hover 为了看空间感效果 */
        .cube:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

9.4 3D导航

目标：使用立体呈现技巧实现3D导航效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D导航</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        .navs {
            width: 300px;
            height: 40px;
            margin: 50px auto;
        }
        
        .navs li {
            position: relative;
            float: left;
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
            transform-style: preserve-3d;

            /* 旋转: 让大家在写代码的过程中看到立体盒子 */
            /* transform: rotateX(-20deg) rotateY(30deg); */

            /* 测试缩放效果 */
            /* transform: scale3d(0.5, 1.1, 2); */
        }

        .navs li a {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            text-decoration: none;
            color: #fff;
        }
        
        .navs li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        
        .navs li a:last-child {
            background-color: orange;
            /* 躺平x轴旋转  立方体的顶部,位移z(确保看到这个盒子) */
            transform: rotateX(90deg) translateZ(20px);
        }

        /* li:hover 立方体旋转 */
        .navs li:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>

<body>
    <div class="navs">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登录</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

hover

实现思路：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hnnsiyJi-1650960101494)(https://gitee.com/silverljh/typora-two/raw/master/image/202204061659768.png)]

10 动画

10.1 动画的实现步骤

目标：使用animation添加动画效果

实现步骤：

1）定义动画

2）使用动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            animation: change 2s;
        }

        /* 只能完成两个状态之间的变化 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        /* 按照百分比定义动画 */
        @keyframes change {
            0% {
                width: 200px;
            }

            50% {
                width: 500px;
                height: 300px;
            }

            100% {
                width: 200px;
                height: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

10.2 动画属性

10.2.1 目标：使用animation相关属性控制动画执行过程

注意：

动画名称和动画时长必须赋值
取值不分先后顺序

如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画实现步骤</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: pink;

            /* 使用动画 */
            /* infinite表示无限循环 */
            /* alternate表示起始过渡，反向过渡 */
            /* backwards默认值 */
            /* forwards停留在执行完毕的状态 */
            animation: change 2s infinite alternate backwards forwards;
        }

        /* 只能完成两个状态之间的变化 */
        /* @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 600px;
            }
        } */
        /* 按照百分比定义动画 */
        @keyframes change {
            0% {
                width: 200px;
            }

            50% {
                width: 500px;
                height: 300px;
            }

            100% {
                width: 200px;
                height: 500px;
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

10.2.2 目标：使用steps实现逐帧动画

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YE0pYOsw-1650960101497)(https://gitee.com/silverljh/typora-two/raw/master/image/202204071547438.png)]

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function: steps(N)；
- 将动画过程等分成N份

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>精灵动画</title>
    <style>
        .box {
            /* 1680/12 : 保证显示区域的尺寸和一个精灵小图的尺寸相同 */
            width: 140px;
            height: 140px;
            /* border: 1px solid #000; */
            background-image: url(./images/bg.png);

            /* 12: 净零小图的个数 */
            animation:
                move 1s steps(12) infinite,
                run 1s forwards;    //目标：能够使用animation属性给一个元素添加多个动画效果
        }


        @keyframes move {

            /* from {
          background-position: 0 0;
        } */
            to {
                /* 1680: 精灵图的宽度 */
                background-position: -1680px 0;
            }
        }

        /* 定义一个盒子移动的动画  800px */
        @keyframes run {

            /* 动画的开始状态和盒子的默认样式相同的, 可以省略开始状态的代码 */
            /* from {
        transform: translateX(0);
      } */
            to {
                transform: translateX(800px);
            }
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

11 综合案例

11.1 走马灯

目标：使用animation实现逐帧图片位移效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      li {
        list-style: none;
      }

      img {
        width: 200px;
      }
      
      .box {
        width: 600px;
        height: 112px;
        border: 5px solid #000;
        margin: 100px auto;
        overflow: hidden;
      }

      .box ul {  
        width: 2000px;    /* 放下所有的图 */
        animation: move 12s infinite linear;
      }

      .box li {
        float: left;
      }

      /* 定义动画:位移, ul 左侧使用  x -1400  */
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }

      /* 用户鼠标移入box,动画暂停 */
      .box:hover ul {
        animation-play-state: paused;
      }
      
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
        <li><img src="./images/4.jpg" alt="" /></li>
        <li><img src="./images/5.jpg" alt="" /></li>
        <li><img src="./images/6.jpg" alt="" /></li>
        <li><img src="./images/7.jpg" alt="" /></li>

        <!-- 第567移动的时候,显示区域不能留白 -->
        <li><img src="./images/1.jpg" alt="" /></li>
        <li><img src="./images/2.jpg" alt="" /></li>
        <li><img src="./images/3.jpg" alt="" /></li>
      </ul>
    </div>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

11.2 全民出游季

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 云彩图片 -->
    <div class="cloud">
        <img src="./images/yun1.png" alt="">
        <img src="./images/yun2.png" alt="">
        <img src="./images/yun3.png" alt="">
    </div>
    <!-- 气球区域 -->
    <div class="balloon">
        <img src="./images/1.png" alt="">
        <img src="./images/2.png" alt="">
        <img src="./images/3.png" alt="">
        <img src="./images/4.png" alt="">
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    background: url(./../images/f1_1.jpg) no-repeat center 0;

    /* 缩放背景图 */

    /* 图片等比例缩放, 当宽度或高度和盒子尺寸相等, 图片就不再缩放 */
    /* background-size: contain; */

    /* 图片等比例缩放, 图片完全覆盖到整个盒子, 可能会导致图片显示不全 */
    background-size: cover;
}

/* 
1. img 引入图片, 控制位置
2. 定义动画,使用动画
*/
.cloud img {
    position: absolute;
    left: 50%;
    top: 0;
}

.cloud img:nth-child(1) {
    margin-left: -300px;
    top: 20px;
    animation: 1s cloud infinite alternate linear;
}

.cloud img:nth-child(2) {
    margin-left: 400px;
    top: 100px;
    animation: 1s cloud infinite alternate 1s linear;
}

.cloud img:nth-child(3) {
    margin-left: -550px;
    top: 200px;
    animation: 1s cloud infinite alternate 0.5s linear;
}

/* 云彩动画 */
@keyframes cloud {
    to {
        transform: translate(20px);
    }
}

.balloon img {
    height: 120px;
    position: absolute;
    bottom: 30px;
    margin-left: 50%;
}

.balloon img:nth-child(1) {
    margin-left: 350px;
    animation: balloon 1s infinite linear alternate;
}

.balloon img:nth-child(2) {
    margin-left: 550px;
    animation: balloon 1s infinite linear alternate 0.5s;
}

.balloon img:nth-child(3) {
    margin-left: 750px;
    animation: balloon 1s infinite linear alternate 1s;
}

.balloon img:nth-child(4) {
    margin-left: 950px;
    animation: balloon 1s infinite linear alternate 0.7s;
}

@keyframes balloon {
    to {
        transform: translateY(-20px);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

12 移动端的特点

1）屏幕尺寸：指的是屏幕对角线的长度，一般用英寸来度量

2）分辨率

PC分辨率PC分辨率
- 1920 * 1080
- 1366 * 768
缩放150%
- （1920/150%）*（1080/150%）
总结
- 硬件分辨率（出厂设置）
- 缩放调节的分辨率（软件设置）
分辨率分类
- 物理分辨率是生产屏幕时就固定的，它是不可被改变的
- 逻辑分辨率是由软件（驱动）决定的
思考：制作网页参考物理分辨率还是逻辑分辨率？
- 逻辑分辨率
目标：了解移动端主流设备分辨率

视口:使用meta标签设置视口宽度，制作适配不同设备宽度的网页

<meta name="viewport" content="width=device-width, initial-scale=1.0">
//viewport：视口  width=device-width：视口宽度 = 设备宽度 initial-scale=1.0：缩放1倍（不缩放）
1
2

二倍图：能够使用像素大厨软件测量二倍图中元素的尺寸
- 现阶段设计稿参考iPhone6/7/8，设备宽度375px产出设计稿。
- 二倍图设计稿尺寸：750px。

13 百分比布局

百分比布局，也叫流式布局
效果：宽度自适应，高度固定。（老式）

14 Flex布局

目标：以往布局存在问题：浮动的盒子脱标。解决办法：能够使用Flex布局模型灵活、快速的开发网页

14.1 Flex布局

Flex布局/弹性布局：
- 是一种浏览器提倡的布局模型
- 布局网页更简单、灵活
- 避免浮动脱标的问题

14.2 Flex布局模型构成

作用
- 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
- Flex布局非常适合结构化布局
设置方式
- 父元素添加 display: flex，子元素可以自动的挤压或拉伸（确保是亲父级）
组成部分
- 弹性容器
- 弹性盒子
- 主轴
- 侧轴 / 交叉轴

14.3 主轴对齐方式

在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

修改主轴对齐方式属性: justify-content

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            /* 视觉效果：子集一行排列/水平排列 */
            /* 为什么水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列 */
            display: flex;
            /* 居中效果 */
            justify-content: center; 
             /* 间距出现在盒子之间 */
            /* justify-content: space-between;  */
            /* 间距出现在两边及盒子之间，且间距相等 */
            /* justify-content: space-evenly; */
            /* 间距出现在两边及盒子之间，且中间大两边小。本质是：将间距加在子集的两侧 */
            /* justify-content: space-around;   */
            height: 200px;
            border: 1px solid #000;
        }
        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

  /* 居中效果 */
  justify-content: center; 
1
2

 /* 间距出现在盒子之间 */
justify-content: space-between; 
1
2

/* 间距出现在两边及盒子之间，且间距相等 */
justify-content: space-evenly;
1
2

/* 间距出现在两边及盒子之间，且中间大两边小。本质是：将间距加在子集的两侧 */
justify-content: space-around;  
1
2

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nXThSMp3-1650960101503)(https://gitee.com/silverljh/typora-two/raw/master/image/202204091705632.png)]

14.4 侧轴对齐方式

修改侧轴对齐方式属性:

align-items（添加到弹性容器）
align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* 视觉效果：子集一行排列/水平排列 */
            /* 为什么水平排列：默认主轴在水平，弹性盒子都是沿着主轴排列 */
            display: flex;
            /* 居中效果 */
            justify-content: center;
            /* 间距出现在盒子之间 */
            justify-content: space-between;
            /* 间距出现在两边及盒子之间，且间距相等 */
            justify-content: space-evenly;
            /* 间距出现在两边及盒子之间，且中间大两边小。本质是：将间距加在子集的两侧 */
            justify-content: space-around;
            height: 200px;
            border: 1px solid #000;
            
            /* 中心对齐 */
            align-items: center;
            /* 子集盒子没有高度时，将高度拉伸至铺满弹性盒子侧轴 */
            align-items: stretch;
        }

        .box div {
            width: 100px;
            /* height: 100px; */
            background-color: pink;
        }
        /* 单独设置某个弹性盒子的侧轴对齐方式 */
        .box div:nth-child(2) {
            align-self: center;    /* 控制子集中的某个盒子将其侧轴居中 */
            height: 100px;   /* center需要高度配合 */
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

14.5 伸缩比

属性
- flex : 值;
取值分类
- 数值(整数)
注意 : 只占用父盒子剩余尺寸

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            height: 300px;
            border: 1px solid #000;
        }
        .box div {
            height: 200px;
            margin: 0 20px;
            background-color: pink;
        }
        .box div:nth-child(1) {
            width: 50px;
        }
        .box div:nth-child(2) {
            flex: 4;  /* 将父级剩余盒子分成5份，第二个盒子占4份 */
        }
        .box div:nth-child(3) {
            flex: 1;   /* 将父级剩余盒子分成5份，第三个盒子占一份 */
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

14.6 实战演练

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>确认订单</title>
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/orders.css">

</head>

<body>
    <!-- 主体内容：滑动查看 -->
    <div class="main">
        <!-- 用户信息 -->
        <div class="pannel user_msg">
            <div class="location">
                <i class="iconfont icon-location"></i>
            </div>
            <div class="user">
                <div class="top">
                    <h5>林丽</h5>
                    <p>18500667882</p>
                </div>
                <div class="bottom">
                    北京市 海淀区 中关村软件园 信息科技大厦1号
                    楼410#
                </div>
            </div>
            <div class="more">
                <i class="iconfont icon-more"></i>
            </div>
        </div>
        <!-- 商品区域 -->
        <div class="pannel goods">
            <div class="pic">
                <a href="#"><img src="./uploads/pic.png" alt=""></a>
            </div>
            <div class="info">
                <h5>康尔贝 非接触式红外体温仪
                    领券立减30元 婴儿级材质 测温…</h5>
                <p>
                    <span>粉色</span>
                    <span>红外体温计</span>
                </p>
                <div class="price">
                    <span class="red">¥ <i>266</i> </span>
                    <span>¥299</span>
                </div>
            </div>
            <div class="count">
                <i class="iconfont icon-x"></i>
                <span>1</span>
            </div>
        </div>
        <!-- 其他信息 -->
        <section class="pannel rest">
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>
            <div>
                <h5>配送方式</h5>
                <p>顺丰快递</p>
            </div>

        </section>
        <!-- 汇总信息 -->
        <div class="pannel sum">
            <div>
                <h5>商品总价</h5>
                <p>￥299.00</p>
            </div>
            <div>
                <h5>运费</h5>
                <p>￥0.00</p>
            </div>
            <div>
                <h5>折扣</h5>
                <p class="red">-￥30.00</p>
            </div>
        </div>

    </div>
    <!-- 底部支付：固定定位 -->
    <div class="pay">
        <div class="left">
            合计：<span>￥<i class="red">266.00</i></span>
        </div>
        <div class="right">
            <a href="#">去支付</a>
        </div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

14.7 主轴方向

主轴默认是水平方向, 侧轴默认是垂直方向
修改主轴方向属性: flex-direction

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ON0d3Zky-1650960101505)(https://gitee.com/silverljh/typora-two/raw/master/image/202204111630855.png)]

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主轴方向</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box li {

            display: flex;
            /* 变化flex主轴方向 */
            flex-direction: column;
            /* 实现列居中（按照主轴方向确定水平和列，主轴方向为水平方向） */
            justify-content: center;
            /* 实现水平居中 */
            align-items: center;


            width: 80px;
            height: 80px;
            border: 1px solid #ccc;
        }

        .box img {
            width: 32px;
            height: 32px;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li>
                <img src="./images/media.png" alt="">
                <span>媒体</span>
            </li>
        </ul>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

14.8 弹性盒子换行

弹性盒子换行显示 : flex-wrap: wrap;
调整行对齐方式：align-content
- 取值与justify-content基本相同

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            flex-wrap: wrap;
            /* flex换行 */
            align-content: center;     /* 行对齐方式 */
            align-content: space-between;   /* 在列呈现跟 justify-content: space-between; 在行中一样的效果 */
            

            height: 500px;
            border: 1px solid #000;
        }

        .box div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

14.9 实战演练

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小兔仙个人中心</title>
    <link rel="shortcut icon" href="./favicon.ico">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/center.css">
</head>

<body>
    <!-- 项部导航 -->
    <div class="xtx_topnav">
        <div class="wrapper">
            <!-- 顶部导航 -->
            <ul class="xtx_navs">
                <li>
                    <a href="./login.html">请先登录</a>
                </li>
                <li>
                    <a href="./register.html">免费注册</a>
                </li>
                <li>
                    <a href="javascript:;">我的订单</a>
                </li>
                <li>
                    <a href="javascript:;">会员中心</a>
                </li>
                <li>
                    <a href="javascript:;">帮助中心</a>
                </li>
                <li>
                    <a href="javascript:;">在线客服</a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="mobile sprites"></i> 手机版
                    </a>
                </li>
            </ul>
        </div>
    </div>
    <!-- 头部 -->
    <div class="xtx_header clearfix">
        <div class="wrapper">
            <!-- 网站Logo -->
            <h1 class="xtx_logo"><a href="/">小兔鲜儿</a></h1>
            <!-- 主导航 -->
            <div class="xtx_navs">
                <ul class="clearfix">
                    <li>
                        <a href="javascript:;">首页</a>
                    </li>
                    <li>
                        <a href="javascript:;">生鲜</a>
                    </li>
                    <li>
                        <a href="javascript:;">美食</a>
                    </li>
                    <li>
                        <a href="javascript:;">餐厨</a>
                    </li>
                    <li>
                        <a href="javascript:;">电器</a>
                    </li>
                    <li>
                        <a href="javascript:;">居家</a>
                    </li>
                    <li>
                        <a href="javascript:;">洗护</a>
                    </li>
                    <li>
                        <a href="javascript:;">孕婴</a>
                    </li>
                    <li>
                        <a href="javascript:;">服装</a>
                    </li>
                </ul>
            </div>
            <!-- 站内搜索 -->
            <div class="xtx_search clearfix">
                <!-- 购物车 -->
                <a href="javascript:;" class="xtx_search_cart sprites">
                    <i>2</i>
                </a>
                <!-- 搜索框 -->
                <div class="xtx_search_wrapper">
                    <input type="text" placeholder="搜一搜">
                </div>
            </div>
        </div>
    </div>

    <!-- 内容：待完成 -->
    <div class="xtx_body">
        <div class="wrapper ">
            <!-- 侧边栏 -->
            <div class="aside"></div>
            <!-- 主体内容 -->
            <div class="main">
                <!-- 用户账户概览 -->
                <div class="overview">
                    <div>
                        <a href="#">
                            <img src="./images//vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images//vip.png" alt="">
                            <p>会员中心</p>
                        </a>
                        <a href="#">
                            <img src="./images//address.png" alt="">
                            <p>会员中心</p>
                        </a>
                    </div>
                    <div>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                        <a href="#">
                            <span>6</span>
                            <p>优惠券</p>
                        </a>
                    </div>
                </div>
                <!-- 订单 -->
                <div class="pannel orders">
                    <div class="pannel_title">
                        <h4>我的订单</h4>
                        <a href="#">查看更多></a>
                    </div>
                    <div class="content">
                        <ul>
                            <li>
                                <div class="goods">
                                    <div class="pic">
                                        <a href="#"><img src="./uploads/order_goods_1.jpg" alt=""></a>
                                    </div>
                                    <div class="txt">
                                        <h5>拉夫劳伦t恤男正品圆领短袖拉夫劳伦t恤男正品圆领短袖</h5>
                                        <p>颜色：白色 尺码：M 数量：1</p>
                                    </div>
                                </div>
                                <div class="status">2</div>
                                <div class="pay common">
                                    <p class="red">￥99.00</p>
                                    <p>（含运费：¥10.00元）</p>
                                    <p>在线支付</p>
                                </div>
                                <div class="action common">
                                    <a href="#">立即付款</a>
                                    <a href="#">查看详情</a>
                                    <a href="#">取消订单</a>
                                </div>
                            </li>
                            <li>
                                2
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 订单 -->
            </div>
        </div>
    </div>
    <!-- 内容 -->


    <!-- 公共底部 -->
    <div class="xtx_footer">
        <div class="wrapper">
            <!-- 联系我们 -->
            <div class="contact clearfix">
                <dl>
                    <dt>客户服务</dt>
                    <dd class="chat">在线客服</dd>
                    <dd class="feedback">问题反馈</dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd class="weixin">公众号</dd>
                    <dd class="weibo">微博</dd>
                </dl>
                <dl>
                    <dt>下载APP</dt>
                    <dd class="qrcode">
                        <img src="./uploads/qrcode.jpg">
                    </dd>
                    <dd class="download">
                        <span>扫描二维码</span>
                        <span>立马下载APP</span>
                        <a href="javascript:;">下载页面</a>
                    </dd>
                </dl>
                <dl>
                    <dt>服务热线</dt>
                    <dd class="hotline">
                        400-0000-000
                        <small>周一至周日 8:00-18:00</small>
                    </dd>
                </dl>
            </div>
        </div>
        <!-- 其它 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 口号 -->
                <div class="slogan">
                    <a href="javascript:;" class="price">价格亲民</a>
                    <a href="javascript:;" class="express">物流快捷</a>
                    <a href="javascript:;" class="quality">品质新鲜</a>
                </div>
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 小兔鲜儿</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243

.xtx_body {
    padding: 30px 0 85px;
    background-color: #f6f6f6;
}

.xtx_body .wrapper {
    display: flex;
}

/* 侧边栏 */
.xtx_body .aside {
    width: 227px;
    min-height: 500px;
    /* 最小高度500px */
    margin-right: 18px;
    background-color: pink;
}

/* 主体内容 */
.xtx_body .main {
    flex: 1;
    min-height: 500px;
    /* background-color: blue; */
}

/* 用户账户概览 */
.overview {
    display: flex;
    height: 132px;
    background-color: #fff;
    padding: 20px 0;
    margin-bottom: 18px;
}

.overview div {
    /* 让a在一行显示 */
    display: flex;
    justify-content: space-evenly;
    /* 各个地方距离相等 */
    align-items: center;
    flex: 1;
    text-align: center;
}

.overview div:nth-child(1) {
    border-right: 1px solid #f4f4f4;
}

.overview div a img {
    width: 25px;
    margin-bottom: 10px;
}

.overview div a:nth-child(3) img {
    width: 18px;
}

.overview div span {
    font-size: 25px;
    color: #e05e30;
}

.overview div p {
    font-size: 16px;
}

/* 订单 */
.pannel {
    padding: 28px 20px;
    margin-bottom: 20px;
    background-color: #fff;
}

.pannel .pannel_title {
    display: flex;
    justify-content: space-between;
    height: 45px;
    border-bottom: 1px solid #f4f4f4;
}

.pannel .pannel_title h4 {
    font-size: 22px;
    color: #333;
    font-weight: 400;
}

.pannel .pannel_title a {
    margin-top: 8px;
    font-size: 16px;
    color: #999;
}

.orders li {
    display: flex;
    height: 137px;
    margin-top: -1px;
    margin-bottom: 20px;
    border: 1px solid #f4f4f4;
}

.orders li:last-child {
    margin-bottom: 0;
}

.orders li .goods {
    display: flex;
    align-items: center;
    padding: 17px 0 14px 12px;
    flex: 1;
    margin-right: 120px;
}

.orders .goods .pic {
    width: 107px;
    height: 107px;
}

.orders .goods .txt {
    flex: 1;
    /* 省略文字 */
    /* 为了溢出的时候显示省略号 */
    width: 0;
}

.orders .goods .txt h5 {
    text-overflow: ellipsis;
    /* 文字溢出时用省略号表示 */
    white-space: nowrap;
    /* 强制文字在一行显示 */
    overflow: hidden;
    /* 不显示溢出文字 */
}


.orders li .status {
    width: 120px;
}

.orders li .pay {
    width: 200px;
    border-left: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
}

.orders li .action {
    width: 180px;
}

.orders li .common {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.orders li .action a:first-child {
    width: 100px;
    height: 30px;
    background-color: #5eb69c;
    border-radius: 2px;

    margin-bottom: 10px;

    color: #fff;
    text-align: center;
    line-height: 30px;
}
.red {
    color: #9a2e1f;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171

15 移动适配rem

rem ：目前多数企业在用的解决方案
vw / vh：未来的解决方案

15.1 rem

网页效果
- 屏幕宽度不同，网页元素尺寸不同（等比缩放）
px单位或百分比布局可以实现吗？
- px单位是绝对单位
- 百分比布局特点宽度自适应，高度固定
适配方案
- rem
- vw / vh
rem单位
- 相对单位
- rem单位是相对于HTML标签的字号计算结果
- 1rem = 1HTML字号大小

1）rem体验

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验rem适配</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            /* width: 10px; */
            width: 5rem;
            height: 5rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script src="./js/flexible.js"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

2）rem使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem基本使用</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        /* 1rem = 20px 标签字号大小 */
        html {
            font-size: 20px;
        }
        
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

15.2 rem移动适配 - 媒体查询

媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式
当某个条件成立, 执行对应的CSS样式

写法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 使用媒体查询, 根据不同的视口宽度, 设置不同的根字号 */
        @media (width:375px) {
            html {
                font-size: 40px;
            }
        }

        @media (width:320px) {
            html {
                font-size: 20px;
            }
        }
    </style>
</head>

<body>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

15.3 rem移动适配

目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem适配</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        
        /* 1. 不同的视口, HTML标签字号不同, 字号是视口宽度的1/10 */
        @media (width:320px) {
            html {
                font-size: 32px;
            }
        }
        @media (width:375px) {
            html {
                font-size: 37.5px;
            }
        }
        @media (width:414px) {
            html {
                font-size: 41.4px;
            }
        }



        /* 2. 书写盒子尺寸, 单位rem */
        .box {
            width: 5rem;
            height: 3rem;
            background-color: pink;
        }
        
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

15.4 rem适配原理

rem单位尺寸
- 根据视口宽度，设置不同的HTML标签字号
- 书写代码，尺寸是rem单位
  - 确定设计稿对应的设备的HTML标签字号
    - 查看设计稿宽度 → 确定参考设备宽度(视口宽度) → 确定基准根字号（1/10视口宽度）
  - rem单位的尺寸
    - N * 37.5 = 68 → N = 68 / 37.5
    - rem单位的尺寸 = px单位数值 / 基准根字号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem开发流程</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

/* 移动适配 */
/* 1. HTML标签加字号 1/10; 2. 写rem单位的尺寸 */
@media (width: 320px) {
    html {
        font-size: 32px;
    }
}
@media (width:375px) {
    html {
        font-size: 37.5px;
    }
}
@media (width: 414px) {
    html {
        font-size: 41.4px;
    }
}

.box {
    /* 68 * 29 */
    /* width: 68px; */
    /* 设计稿375, HTML 37.5   68/37.5 */
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

15.5 flexible

flexible.js是手淘开发出的一个用来适配移动端的js框架。
核心原理就是根据不同的视口宽度给网页中html根节点设置不同的font-size。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rem开发流程</title>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <div class="box"></div>

    <script src="../js/flexible.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.box {
    /* 68 * 29 */
    /* width: 68px; */
    /* 设计稿375, HTML 37.5   68/37.5 */
    width: 1.813rem;
    height: 0.773rem;
    background-color: pink;
}
1
2
3
4
5
6
7
8

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

15.6 Less语法

Less是一个CSS预处理器, Less文件后缀是**.less**
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
注意：浏览器不识别Less代码，目前阶段，网页要引入对应的CSS文件。

.father {
    color: red;

    width: (68 / 37.5rem);

    .son {
        background-color: pink;
    }
}
1
2
3
4
5
6
7
8
9

会自动转化为一个css文件
.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  background-color: pink;
}

1
2
3
4
5
6
7
8
9

15.7 编译插件

Easy Less :
- vscode插件
- 作用：less文件保存自动生成css文件

15.8 Less语法

注释：
- 单行注释
  - 语法：// 注释内容
  - 快捷键：ctrl + /
块注释
- 语法：/* 注释内容 */
  - 快捷键： shift + alt + A
运算：
- 加、减、乘直接书写计算表达式
- 除法需要添加小括号或 .
- 注意：
  - 表达式存在多个单位以第一个单位为准

less
.box {
    width: 100 + 10px;
    width: 100 - 20px;
    width: 100 * 2px;

    // 除法
    // 68  > rem
    width: (68 / 37.5rem);
    //  height: 29 ./ 37.5rem;

    height: (29 / 37.5rem);

}
css
.box {
  width: 110px;
  width: 80px;
  width: 200px;
  width: 1.81333333rem;
  height: 0.77333333rem;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

嵌套：
- 作用：快速生成后代选择器。
- 注意：&不生成后代选择器，表示当前选择器，通常配合伪类或伪元素使用

less
.father {
    width: 100px;
    .son {
        color: pink;
        // & 表示当前选择器
        &:hover {
            color: green;
        }
    }

    &:hover {
        color: orange;
    }
}
css
.father {
  width: 100px;
}
.father .son {
  color: pink;
}
.father .son:hover {
  color: green;
}
.father:hover {
  color: orange;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

变量
- 方法二：把颜色提前存储到一个容器，设置属性值为这个容器名
- 变量：存储数据，方便使用和修改。
- 语法：
  - 定义变量：@变量名: 值;
  - 使用变量：CSS属性：@变量名;

less
// 1. 定义. 2.使用
@colora:green;    /* 封装的颜色集，起一个名称 */

.box {
    color: @colora; 
    /* 盒子想要使用什么颜色，就在color中选取合适的封装颜色集名称 */
}

.father {
    background-color: @colora;
}

.aa {
    color: @colora;
}
css
/* 封装的颜色集，起一个名称 */
.box {
  color: green;
  /* 盒子想要使用什么颜色，就在color中选取合适的封装颜色集名称 */
}
.father {
  background-color: green;
}
.aa {
  color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

导入: @import “文件路径”;

less
@import './01-体验less.less';
@import './02-注释';
css
01内容
.father {
  color: red;
  width: 1.81333333rem;
}
.father .son {
  background-color: pink;
}
02内容
/* 
    块注释
    第二行
    第三行
*/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

15.9 使用Less语法导出CSS文件（配置生成css的位置）

方法一：
- 配置EasyLess插件，实现所有Less有相同的导出路径
- 配置插件：设置 → 搜索EasyLess → 在setting.json中编辑 → 添加代码（注意，必须是双引号）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1Wr8KtC8-1650960101513)(https://gitee.com/silverljh/typora-two/raw/master/image/202204181517339.png)]

{
    "editor.minimap.enabled": false,
    "workbench.iconTheme": "vscode-icons",
    "[html]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "[javascript]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "window.zoomLevel": 0,
    "[css]": {
        "editor.defaultFormatter": "HookyQR.beautify"
    },
    "files.autoSave": "afterDelay",
    "less.compile": {
    
        "out": "../css/"     //配置部分
    
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

方法二：控制当前Less文件导出路径
- Less文件第一行添加如下代码, 注意文件夹名称后面添加 /
```
// out: ./qqq/daqiu.css
// out: ./abc/
1
2
```

思考：所有的Less文件都需要导出CSS文件吗？

禁止导出

在less文件第一行添加: // out: false
1

15.10 实战演练

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FC游乐园</title>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 主体内容 -->
    <div class="main">
        <div class="banner">
            <ul>
                <li><a href="#"><img src="./uploads/banner_1.png" alt=""></a></li>
            </ul>
        </div>
        <!-- 活动标题 -->
        <div class="title">
            <h4>乐园活动</h4>
        </div>
        <!-- 活动 -->
        <section class="item">
            <div class="pic">
                <a href="#"><img src="./uploads/item_2.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#"><img src="./uploads/item_1.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
        <section class="item">
            <div class="pic">
                <a href="#"><img src="./uploads/item_3.png" alt=""></a>
                <!-- 收藏图标 -->
                <i class="iconfont icon-shoucang1"></i>

                <!-- 活动状态 -->
                <div class="active off">进行中</div>
            </div>
            <div class="txt">
                <div class="top">
                    <h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5>
                    <p>免费</p>
                </div>
                <div class="bottom">
                    <p>
                        <i class="iconfont icon-qizhi"></i>
                        <span>200</span>人已报名
                    </p>
                    <p>
                        <i class="iconfont icon-shizhong"></i>
                        <span>本周六</span>开始
                    </p>
                </div>
            </div>
        </section>
    </div>
    <!-- 主体内容 -->

    <!-- 底部工具栏 -->
    <footer>
        <a href="#" class="content">
            <i class="iconfont icon-index-copy"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-youhuiquan"></i>
            <p>首页</p>
        </a>
        <a href="#">
            <i class="iconfont icon-iconfront-"></i>
            <p>首页</p>
        </a>
    </footer>
    <!-- 底部工具栏 -->
    <script src="./js/flexible.js"></script>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

@charset 'UTF-8';
body,
ul,
p,
h3,
h4,
h5,
h6 {
  padding: 0;
  margin: 0;
}
body {
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
}
img {
  display: block;
  max-width: 100%;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
html {
  font-family: sans-serif;
  /* 1 */
  line-height: 1.15;
  /* 2 */
  -ms-text-size-adjust: 100%;
  /* 3 */
  -webkit-text-size-adjust: 100%;
  /* 3 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/**
 * Add the correct display in IE 9-.
 */
article,
aside,
footer,
header,
nav,
section {
  display: block;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */
figcaption,
figure,
main {
  /* 1 */
  display: block;
}
/**
 * Add the correct margin in IE 8.
 */
figure {
  margin: 1em 40px;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
  background-color: transparent;
  /* 1 */
  -webkit-text-decoration-skip: objects;
  /* 2 */
}
/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
  outline-width: 0;
}
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  text-decoration: underline dotted;
  /* 2 */
}
/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
  font-weight: inherit;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
  font-style: italic;
}
/**
 * Add the correct background and color in IE 9-.
 */
mark {
  background-color: #ff0;
  color: #000;
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Embedded content
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
audio,
video {
  display: inline-block;
}
/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
  border-style: none;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: sans-serif;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}
/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto;
}
/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */
details,
menu {
  display: block;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 */
canvas {
  display: inline-block;
}
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* Hidden
   ========================================================================== */
/**
 * Add the correct display in IE 10-.
 */
[hidden] {
  display: none;
}
/* 变量：存储37.5rem */
body {
  background-color: #f0f0f0;
}
.main {
  padding-bottom: 1.33333333rem;
}
.main .banner {
  height: 4.26666667rem;
}
.main .title {
  height: 1.06666667rem;
  padding-left: 0.4rem;
  line-height: 1.06666667rem;
}
.main .title h4 {
  font-size: 0.37333333rem;
  color: #3C3C3C;
}
.main .item {
  margin-bottom: 0.26666667rem;
}
.main .item .pic {
  position: relative;
  height: 4.26666667rem;
}
.main .item .pic i {
  position: absolute;
  top: 0.4rem;
  right: 0.48rem;
  font-size: 0.64rem;
  color: #fff;
}
.main .item .pic .active {
  position: absolute;
  left: 0.4rem;
  top: -0.10666667rem;
  width: 1.81333333rem;
  height: 0.77333333rem;
  background-image: url(../images/status_active.png);
  background-size: contain;
  font-size: 0.32rem;
  color: #fff;
  line-height: 0.66666667rem;
  text-align: center;
  /* 设置灰色图片的样子 */
}
.main .item .pic .active.off {
  background-image: url(../images/status_default.png);
}
.main .item .txt {
  padding: 0.26666667rem 0.4rem;
  background-color: #fff;
}
.main .item .txt .top {
  display: flex;
  justify-content: space-between;
}
.main .item .txt .top h5 {
  width: 7.86666667rem;
  font-size: 0.4rem;
  color: #3C3C3C;
}
.main .item .txt .top p {
  font-size: 0.4rem;
  color: #FE6249;
}
.main .item .txt .bottom {
  display: flex;
  margin-top: 0.4rem;
}
.main .item .txt .bottom p {
  margin-right: 0.4rem;
  font-size: 0.29333333rem;
  color: #B4B4B4;
}
.main .item .txt .bottom p i {
  font-size: 0.21333333rem;
}
footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  width: 100%;
  /* 防止脱标 */
  position: fixed;
  left: 0;
  bottom: 0;
  height: 1.33333333rem;
  background-color: #FECA49;
}
footer a {
  color: #D78B09;
  font-size: 0.29333333rem;
}
footer a .iconfont {
  font-size: 0.64rem;
}
footer a.content {
  color: #FEFEFE;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536

less
@import './base.less';
@import './normalize.less';

/* 变量：存储37.5rem */
@rootSize: 37.5rem;


body {
    background-color: #f0f0f0;
}

//主体内容
.main {
    padding-bottom: (50 / @rootSize);

    //banner
    .banner {
        height: (160 / @rootSize);
    }

    //活动标题
    .title {
        height: (40 / @rootSize);
        padding-left: (15 / @rootSize);
        line-height: (40 / @rootSize);

        h4 {
            font-size: (14 / @rootSize);
            color: #3C3C3C;
        }
    }

    //活动
    .item {
        margin-bottom: (10 / @rootSize);

        //图片区域
        .pic {
            position: relative;
            height: (160 / @rootSize);

            //收藏图标
            i {
                position: absolute;
                top: (15 / @rootSize);
                right: (18 / @rootSize);

                font-size: (24 / @rootSize);
                color: #fff;
            }

            //活动状态
            .active {
                position: absolute;
                left: (15 / @rootSize);
                top: (-4 / @rootSize);
                width: (68 / @rootSize);
                height: (29 / @rootSize);
                background-image: url(./../images/status_active.png);
                background-size: contain;

                font-size: (12 / @rootSize);
                color: #fff;
                line-height: (25 / @rootSize);
                text-align: center;

                /* 设置灰色图片的样子 */
                //active.off {} 交集选择器  必须是active类的同时应用了off类  
                &.off {
                    background-image: url(./../images/status_default.png);
                }
            }

        }

        //文字区域
        .txt {
            padding: (10 / @rootSize) (15 /@rootSize);
            background-color: #fff;

            .top {
                display: flex;
                justify-content: space-between;

                h5 {
                    width: (295 / @rootSize);
                    font-size: (15 / @rootSize);
                    color: #3C3C3C;
                }

                p {
                    font-size: (15 / @rootSize);
                    color: #FE6249;
                }
            }

            .bottom {
                display: flex;
                margin-top: (15 / @rootSize);

                p {
                    margin-right: (15 / @rootSize);
                    font-size: (11 / @rootSize);
                    color: #B4B4B4;

                    i {
                        font-size: (8 / @rootSize);
                    }
                }
            }
        }
    }

}

//底部工具栏
footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;

    a {
        color: #D78B09;
        font-size: (11 / @rootSize);
        .iconfont {
            font-size: (24 / @rootSize);
        }
        &.content {
            color: #FEFEFE;
        }
    }



    width: 100%;
    /* 防止脱标 */
    position: fixed;
    left: 0;
    bottom: 0;

    height: (50 / @rootSize);
    background-color: #FECA49;




}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149

16 移动适配vw/vh

16.1 vw / vh

相对单位
相对视口的尺寸计算结果
vw：viewport width
- 1vw = 1/100视口宽度
vh：viewport height
- 1vh = 1/100视口高度

16.2 vw适配原理

vw单位尺寸
- 确定设计稿对应的vw尺寸（1/100视口宽度）
  - 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸（1/100 视口宽度）
- vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

16.3 vh适配原理

vh单位尺寸
- 确定设计稿对应的vh尺寸（1/100视口高度）
  - 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸（1/100 视口高度）
- vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

思考：开发中，会不会vw和vh混用呢？

不会。
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>体验vw和vh</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 1. vw = 1/100视口宽度 */
        /*   .box {
            width: 50vw;
            height: 30vw;
            background-color: pink;
        } */


        /* 2.vh = 1/100视口高度 */
        .box {
            width: 50vh;
            height: 30vh;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

16.4 实战演练

目标：实现在不同宽度设备中等比缩放的网页效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>B站</title>
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部区域 -->
    <header>
        <div class="top">
            <div class="left">
                <i class="iconfont Navbar_logo"></i>
            </div>
            <div class="right">
                <a href="#">
                    <i class="iconfont ic_search_tab"></i>
                </a>
                <a href="#" class="login"><img src="./images/login.png" alt=""></a>
                <a href="#" class="download"><img src="./images/download.png" alt=""></a>
            </div>
        </div>
        <div class="bottom">
            <div class="tab">
                <ul>
                    <li><a href="#" class="current">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>

                </ul>
            </div>
            <div class="more">
                <a href="#">
                    <i class="iconfont general_pulldown_s"></i>
                </a>
            </div>
        </div>
    </header>

    <!-- 视频 -->
    <section class="video_content">
        <div class="video_list">
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
            <a href="#">
                <div class="pic">
                    <img src="./images/1.jpg" alt="">
                    <div class="count">
                        <p>
                            <i class="iconfont icon_shipin_bofangshu"></i>
                            <span>132</span>万
                        </p>
                        <p>
                            <i class="iconfont icon_shipin_danmushu"></i>
                            <span>2.4</span>万
                        </p>
                    </div>
                </div>
                <div class="txt ellipsis-2">你活着补刀就是对我最大的侮辱，韩服最强王者组单杀集锦#19</div>
            </a>
         
           
        </div>
    </section>

    <!-- 按钮固定 -->
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  vertical-align: middle;
  width: 100%;
  height: 100%;
}
ul {
  list-style: none;
}
.ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
header {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 22.4vw;
  background-color: #fff;
}
header .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 11.73333333vw;
  padding-left: 4.8vw;
  padding-right: 5.86666667vw;
}
header .top .left .iconfont {
  font-size: 7.46666667vw;
  color: #fb7299;
}
header .top .right {
  display: flex;
}
header .top .right .iconfont {
  font-size: 5.86666667vw;
  color: #ccc;
}
header .top .right .login {
  width: 6.4vw;
  height: 6.4vw;
  margin-left: 6.4vw;
}
header .top .right .download {
  width: 19.2vw;
  height: 6.4vw;
  margin-left: 6.4vw;
}
header .bottom {
  display: flex;
  justify-content: space-between;
  height: 10.66666667vw;
  border-bottom: 1px solid #eee;
}
header .bottom .more a {
  display: block;
  width: 10.66666667vw;
  height: 10.66666667vw;
  text-align: center;
  line-height: 10.66666667vw;
  color: #ccc;
}
header .bottom .more a .iconfont {
  font-size: 5.86666667vw;
}
header .bottom .tab ul {
  display: flex;
}
header .bottom .tab ul li {
  padding: 0 4.26666667vw;
}
header .bottom .tab ul li a {
  display: block;
  line-height: 10.13333333vw;
  font-size: 3.73333333vw;
  height: 10.13333333vw;
}
header .bottom .tab ul li a.current {
  color: #fb7299;
  border-bottom: 2px solid #fb7299;
}
.video_content {
  padding: 22.4vw 1.33333333vw 0;
}
.video_content .video_list {
  display: flex;
  flex-wrap: wrap;
}
.video_content .video_list a {
  width: 50%;
  padding: 2.13333333vw 1.33333333vw;
  font-size: 3.2vw;
}
.video_content .video_list a .txt {
  margin-top: 1.33333333vw;
}
.video_content .video_list a .pic {
  position: relative;
}
.video_content .video_list a .pic .count {
  color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 2.13333333vw;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
}
.video_content .video_list a .pic .count i {
  vertical-align: middle;
  /* 改变图字进行对齐 */
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

17 响应式

17.1 媒体查询

17.1.1 基本语法

目标：能够根据设备宽度的变化，设置差异化样式

开发常用写法
- 媒体特性常用写法
  - max-width
  - min-width

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fiokVera-1650960101517)(https://gitee.com/silverljh/typora-two/raw/master/image/202204231608989.png)]

17.1.2 书写顺序

min-width（从小到大）
max-width（从大到小）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            视口宽度 >= 768px，网页背景色是 粉色
            视口宽度 >= 992px，网页背景色是 绿色
            视口宽度 >= 1200px，网页背景色是 skyblue
         */

        /* css属性都有层叠性 */

        /* @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        } */
      
        @media (min-width: 768px) {
            body {
                background-color: pink;
            }
        }

        @media (min-width: 992px) {
            body {
                background-color: green;
            }
        }
        @media (min-width: 1200px) {
            body {
                background-color: skyblue;
            }
        }
    </style>
</head>

<body>

</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

17.1.3 基本语法

目标：能够根据设备宽度的变化，设置差异化样式

完整写法

17.1.4 关键词

and
only
not

17.1.5 媒体类型

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

17.1.6 媒体特征

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

17.1.7 基本语法

外链式CSS引入

17.2 BootStrap

17.2.1 UI框架

目标：知道 UI框架的作用

UI框架概念
- 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
作用
- 基于框架开发，效率高，稳定性高。

17.2.2 BootStrap简介

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。
中文官网: https://www.bootcss.com/

17.2.3 BootStrap使用步骤

下载： https://www.bootcss.com/
首页 → BootStrap3中文文档 → 下载BootStrap

使用
- 使用步骤
  - 引入： BootStrap提供的CSS代码
```
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
1
```
  - 调用类：使用BootStrap提供的样式
- container：响应式布局版心类

17.2.4 BootStrap栅格系统

栅格化是指将整个网页的宽度分成若干等份
BootStrap3默认将网页分成12等份

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oKQ7XhGE-1650960101521)(https://gitee.com/silverljh/typora-two/raw/master/image/202204251601850.png)]

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。

注意: 1. container类自带间距15px;

2.row类自带间距-15px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统-类</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <!-- 版心样式 -->
    <div class="container">1</div>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>栅格系统-类</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <style>
        div {
            height: 50px;
            background-color: pink;
            margin-bottom: 50px;
        }
    </style>
</head>
<body>
    <!-- 版心样式 左右自带15px的内边距-->
    <div class="container">1</div>

    <!-- row类的作用是抵消container带来的内边距，row有-15px的外边距 -->
    <div class="container">
        <div class="row">2</div>
    </div>

    <!-- 宽度100%：自带左右15px的内边距 -->
    <div class="container-fluid">3</div>
 
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

17.3 全局样式

分类：

布局样式
内容美化样式

手册用法：

BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。
网站首页 → BootStrap3中文文档 → 全局CSS样式 → 按分类导航查找目标类

1）全局CSS样式

布局类：表格

table : 基本类名, 初始化表格默认样式
table-bordered : 边框线
table-striped : 隔行变色
table-hover : 鼠标悬停效果
table-responsive : 表格宽溢出滚动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局CSS样式-表格</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <table class="table  table-striped table-bordered table-hover table-responsive ">
        <tr>
            <th>数字1</th>
            <th>数字2</th>
            <th>数字3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

    
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

美化内容类：按钮

btn : 基准样式
btn-info; btn-success : 设置按钮背景色
btn-block : 设置按钮为块元素
btn-lg; btn-sm; btn-xs : 设置按钮大小

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局CSS样式-按钮</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <button class="btn btn-success btn-lg">成功</button>

    <button class="btn btn-warning btn-sm">警告</button>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2）组件

组件

BootStrap提供的常见功能，包含了HTML结构和CSS样式。

使用方法

引入BootStrap样式
复制结构，修改内容

Glyphicons字体图标

Glyphicons字体图标的使用步骤：

HTML页面引入BootStrap样式文件
准备字体文件 (注意路径)
空标签调用对应类名
- glyphicon
- 图标类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体图标</title>
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
</head>
<body>
    <i class="glyphicon glyphicon-user"></i>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yEcpVJFQ-1650960101526)(https://gitee.com/silverljh/typora-two/raw/master/image/202204251655207.png)]

3）JavaScript插件

学习路径

了解插件
插件分类
插件使用

插件

BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript

插件的使用步骤

引入BootStrap样式
引入js文件：jQuery.js + BootStrap.min.js

复制HTML结构, 并适当调整结构或内容

4）定制

定制步骤
- 导航菜单 → 定制
- 输入目标变量值
- 编译并下载，使用定制后的框架

17.4 实战演练

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>腾讯全端</title>
  <!-- <link rel="stylesheet" href="./lib/bootstrap-3.4.1-dist/css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 菜单区域 -->
  <nav class="navbar navbar-default navbar-fixed-top">
    <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="#"><img src="./images/logo.png" alt=""></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 navbar-right">
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
          <li><a href="#">Link</a></li>
        </ul>
      </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
  </nav>


  <!-- banner -->
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
      <li data-target="#carousel-example-generic" data-slide-to="1"></li>
      <li data-target="#carousel-example-generic" data-slide-to="2"></li>
      <li data-target="#carousel-example-generic" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="./uploads/banner_1.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="./uploads/banner_2.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="./uploads/banner_3.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      <div class="item">
        <img src="./uploads/banner_4.jpg" alt="...">
        <div class="carousel-caption">
          ...
        </div>
      </div>
      
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>


  <!-- 开源项目 -->
  <div class="project">
    <h3 class="h2">OpenSource/开源项目</h3>
    <p>种类众多的开源项目，让你爱不释手</p>
    <div class="container">
      <div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
      <div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
      <div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
      <div class="col-md-3 col-sm-6 col-xs-12"><a href="#">1</a></div>
    </div>
  </div>

  <!--  -->

  <script src="./lib/js/jquery.js"></script>
  <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
</body>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

.carousel img {
  height: 100% !important;
}
@media (max-width: 992px) {
  .carousel .item {
    height: 400px;
  }
}
@media (max-width: 768px) {
  .carousel .item {
    height: 250px;
  }
}
@media (min-width: 992px) {
  .carousel .item {
    height: 500px;
  }
}
/* 菜单区域 */
.navbar-default {
  background-color: transparent;
  border: 0;
}
.navbar-default .navbar-nav a {
  color: #fff !important;
}
/* 开源项目 */
.project {
  padding-top: 30px;
  text-align: center;
}
.project .container div {
  margin-bottom: 10px;
}
.project .container div a {
  display: block;
  height: 200px;
  background-color: green;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

less
//banner
.carousel {

    //如果视口宽度<768，图250
    //如果视口宽度<992，图400
    //如果视口宽度>992，图500
    img {
        height: 100% !important;
    }

    @media (max-width: 992px) {
        .item {
            height: 400px;
        }
    }

    @media (max-width: 768px) {
        .item {
            height: 250px;
        }
    }

    @media (min-width: 992px) {
        .item {
            height: 500px;
        }
    }
}

/* 菜单区域 */
.navbar-default {
    background-color: transparent;
    border: 0;

    .navbar-nav {
        a {
            color: #fff !important;
        }
    }
}

/* 开源项目 */
.project {
    padding-top: 30px;
    text-align: center;
    .container {
        div {
            // background-color: pink;
            margin-bottom: 10px;
            a {
                display: block;
                height: 200px;
                background-color: green;
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/270868?site