片刻网项目

复习回顾——页面布局

如图，需要实现的布局为经典的三列布局（logo、导航、登录注册按钮）。

对于这种情况首先想到的应该是这样的。

也就是说在一个大的容器中，我们在写入一个容器（红色）作为存放绿色容器、蓝色容器、紫色容器 。那么实现起来就很简单了。

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 黑色的大容器 -->
<header class="head">
    <!-- 红色部分 -->
    <div class="container">
        <!-- 绿色部分 -->
        <div class="logo"></div>
        <!-- 蓝色部分 -->
        <div class="nav"></div>
        <!-- 紫色部分 -->
        <div class="login"></div>
    </div>
</header>

第一步需要做的就是黑色的容器的宽度设置为100%,这是为了给里边的元素实现居中。

1
2
3
.head {
    width: 100%;
}

第二步就是实现红色容器的居中并且设置宽高。这一步也很简单，因为黑色的已经有了宽度，那么只需要进行外边距左右自动即可。

1
2
3
4
5
.head .container {
    width: 1200px;
    height: 90px;
    margin: 0 auto;
}

第三步即调整绿色容器、蓝色容器、紫色容器 的位置问题

实现之前，应首先设置他们的宽高，为了方便同时设置上背景色，方便调整。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 左侧绿色div */
.head .container .logo {
    width: 80px;
    height: 90px;
    background-color: green;

}
/* 中间蓝色div */
.head .container .nav {
    width: 420px;
    height: 90px;
    background-color: blue;
}
/* 右边紫色div */
.head .container .login{
    width: 240px;
    height: 90px;
    background-color: purple;
}

  1. 第一种方案：通过浮动实现

    这种方法很简单。

    第一步：左侧与中间设置为浮动

    第二步：调整中间距离左侧的距离（margin-left）

    第三步：右侧使用右浮动即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .head .container .logo,
    .head .container .nav{
        float: left;
    }
    .head .container .nav{
        margin-left: 20px;
    }
    .head .container .login{
        float: right;
    }

    参考演示：https://antmoe.gitee.io/project/2020/03/23/center-1.html

  2. 第二种方案：定位

    这种方法也很容易理解。

    第一步：为父级容器开启相对定位（因为不脱离文档流）

    第二步：为每个子集元素（绿蓝紫div）设置绝对定位。

    第三步：利用top、left调整每个div的位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    /* 为父级开启相对定位 */
    .head .container {
        position: relative;
    }
    /* 将每个div设置为绝对定位 */
    .head .container .login,
    .head .container .logo,
    .head .container .nav {
        position: absolute;
        top: 0;
    }
    /* 调整每个的位置 */
    .head .container .logo {
        left: 0;
    }
    .head .container .nav {
        left: 180px;
    }
    .head .container .login {
        left: 1000px;
    }

    参考演示：https://antmoe.gitee.io/project/2020/03/23/center-2.html

  3. 第三种方案：利用表格

    这种方法也很简单。

    第一步：将父级的显示为表格

    第二步：子级显示为单元格

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /* 将父级的显示为表格 */
    .head .container {
        display: table;
    }
    /* 子级显示为单元格 */
    .head .container .login,
    .head .container .logo,
    .head .container .nav {
        display: table-cell;
    }

    但是这个方法存在一些问题,如图，使用表格后会默认将其填充满，无法使用宽高进行设置。解决方法也很简单，使用内边距即可解决位置问题。因为不需要使用背景色，所以在效果上是看不出来问题的。

    参考演示：https://antmoe.gitee.io/project/2020/03/23/center-3.html

  4. 第四种方案：外边距

    这种方法简单暴力。利用margin-top、margin-left即可调整各元素的位置。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .head .container .nav {
        margin-left: 180px;
    }

    .head .container .login,
    .head .container .nav {
        margin-top: -90px;
    }

    .head .container .login {
        margin-left: 1000px;
    }

    参考演示：https://antmoe.gitee.io/project/2020/03/23/center-4.html

  5. 第五种方案：内联元素

    这种方法利用行内块级元素的特性可以实现。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 将元素设置为inline-block */
    .head .container .logo,
    .head .container .nav,
    .head .container .login {
        display: inline-block;
    }
    .head .container .nav {
        margin-left: 180px;
    }
    .head .container .login {
        margin-left: 270px;
    }

    参考演示：https://antmoe.gitee.io/project/2020/03/23/center-5.html

第四步就是该在这些元素中填充内容了。

实现片刻网的导航栏

复习了上面的布局后很容易实现这个效果。

参考演示：https://antmoe.gitee.io/project/2020/03/23/index1.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
<!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>
      * {
        box-sizing: border-box;
      }
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: #fafafa;
        background-image: url("./imgs/bgImg.png");
        background-repeat: repeat-x;
      }
      body a {
        color: #000;
        text-decoration: none;
      }
      .head {
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

      .head .container {
        width: 1200px;
        height: 90px;
        margin: 0 auto;
      }

      .head .container .logo {
        width: 80px;
        height: 90px;
      }

      .head .container .nav {
        width: 420px;
        height: 90px;
      }

      .head .container .login-container {
        width: 240px;
        height: 90px;
        margin-left: 1000px;
        /* 开启相对定位是因为子级需要绝对定位 */
        position: relative;
      }

      .head .container .nav {
        margin-left: 180px;
        padding: 0;
        list-style: none;
        margin-bottom: 0;
      }

      .head .container .login-container,
      .head .container .nav {
        margin-top: -90px;
      }

      /* 顶部导航栏logo */
      .head .container .logo a {
        display: block;
        width: 80px;
        height: 90px;
        padding-top: 26px;
      }
      .head .container .logo img {
        display: block;
        width: 100%;
        height: auto;
      }
      /* 顶部导航中的菜单 */
      /* 为每一个列表内容设置样式 */
      .head .container .nav li {
        float: left;
        width: 84px;
        height: 90px;
        text-align: center;
        line-height: 90px;
        cursor: pointer;
      }
      /* 选择没有被选中的标签 */
      .head .container .nav li:not(.active) {
        transition: all 0.2s;
      }
      /* 没有被选中的标签鼠标悬停时的效果 */
      .head .container .nav li:not(.active):hover {
        font-size: 120%;
        background-color: #fbfbfb;
      }
      /* 标签被选中后 */
      .nav li.active {
        background-color: #fbfbfb;
        font-weight: bolder;
        box-shadow: inset 0 -3px 0 0 #333;
      }
      /* 顶部导航中的登录与注册 */
      .head .container .login-container div {
        /* 通过绝对定位实现上下居中 */
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
      .head .container .login-container .write {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        border: 1px solid #57ad68;
      }
      .head .container .login-container .write div {
        width: 38px;
        height: 38px;
        background-color: #57ad68;
        border-radius: 50%;
        margin-left: 2px;
        cursor: pointer;
        transition: all 0.2s;
      }
      .head .container .login-container .write div:hover {
        box-shadow: inset 0 0 10px #fff;
      }
      .head .container .login-container .write div img {
        width: 20px;
        height: auto;
        margin-top: 9px;
        margin-left: 10px;
      }
      .head .container .login-container .login {
        width: 126px;
        height: 46px;
        left: 74px;
        border-radius: 23px;
        color: #57ad68;
        border: 1px solid #57ad68;
        text-align: center;
        line-height: 44px;
        font-size: 14px;
        font-weight: 300;
        cursor: pointer;
        transition: all 0.2s;
      }
      .head .container .login-container .login:hover {
        background-color: #57ad68;
        color: #fff;
      }
    </style>
  </head>

  <body>
    <!-- 作为顶部导航栏的容器 -->
    <header class="head">
      <!-- 实现水平居中效果容器 -->
      <div class="container">
        <!-- 显示网页logo -->
        <div class="logo">
          <a href="#">
            <img
              src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/03/23/20200323195420.png"
            />
          </a>
        </div>
        <!-- 显示网站菜单 -->
        <ul class="nav">
          <li class="active">首页</li>
          <li>阅读</li>
          <li>电台</li>
          <li>碎片</li>
          <li>客户端</li>
        </ul>
        <!-- 登录注册 -->
        <div class="login-container">
          <!-- 写作的按钮 -->
          <div class="write">
            <div>
              <img
                src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/03/23/20200323195459.png"
                alt=""
              />
            </div>
          </div>
          <!-- 登录注册按钮 -->
          <div class="login">
            登录/注册
          </div>
        </div>
      </div>
    </header>
  </body>
</html>

实现聚焦图片

参考演示：https://antmoe.gitee.io/project/2020/03/23/index.html

聚焦图片的实现最简单的实现方式就是通过表格来实现，通过图片可以很容易想到八个方格，其中左边四个合并显示为一个。其他四个分别显示。

所以我们的html可以为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
    <tr>
        <td class="big-picture" colspan="2" rowspan="2">
            <img src="https://ae01.alicdn.com/kf/Udda8d51179294281b3ec2fdfda1fc16eV.jpg" alt="" />
        </td>
        <td>
            <img src="https://ae01.alicdn.com/kf/U1eb62310ea974465ab6c4377b2332e5cC.jpg" alt="" />
        </td>
        <td>
            <img src="https://ae01.alicdn.com/kf/U118acb8ebb1a4bcf99b1b40b6e155962L.jpg" alt="" />
        </td>
    </tr>
    <tr>
        <td>
            <img src="https://ae01.alicdn.com/kf/Udbcd215d6d294fe4b14323036064ad6bF.jpg" alt="" />
        </td>
        <td>
            <img src="https://ae01.alicdn.com/kf/U51353f36187b4bddadd8365c7f824604P.jpg" alt="" />
        </td>
    </tr>
</table>

样式表为以下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/* 聚焦图片 */
.focus-picture table {
    width: 100%;
    /* 属性是用来决定表格的边框是分开的还是合并的  collapse共享边框*/
    border-collapse: collapse;
    padding: 0;
    /* 指定相邻单元格边框之间的距离 */
    border-spacing: 0;
}
/* 每个单元格的大小为25% */
.focus-picture table td {
    width: 25%;
    padding: 0;
    border-spacing: 0;
}

.focus-picture table td img {
    width: 240px;
    display: block;
}

.focus-picture table .big-picture img {
    width: 480px;
}

通过其他方式实现聚焦图片的布局

这里我先将html结构改为

1
2
3
4
5
6
7
<div class="focus-picture">
    <img src="https://ae01.alicdn.com/kf/Udda8d51179294281b3ec2fdfda1fc16eV.jpg" alt="" />
    <img src="https://ae01.alicdn.com/kf/U1eb62310ea974465ab6c4377b2332e5cC.jpg" alt="" />
    <img src="https://ae01.alicdn.com/kf/U118acb8ebb1a4bcf99b1b40b6e155962L.jpg" alt="" />
    <img src="https://ae01.alicdn.com/kf/Udbcd215d6d294fe4b14323036064ad6bF.jpg" alt="" />
    <img src="https://ae01.alicdn.com/kf/U51353f36187b4bddadd8365c7f824604P.jpg" alt="" />
</div>

通过margin实现布局

参考演示：https://antmoe.gitee.io/project/2020/03/23/index-margin.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
.content img{
    display: block;
}
.content img:not(:first-child){
    width: 240px;
    height: auto;
}
.content img:first-child{
    width: 480px;
    height: auto;
}
/* 第二个图片 */
.content img:nth-of-type(2){
    margin-top: -480px;
    margin-left: 480px;
}
/* 第三个图片 */
.content img:nth-of-type(3){
    margin-top: -240px;
    margin-left: 720px;
}
/* 第四个图片 */
.content img:nth-of-type(4){

    margin-left: 480px;
}
/* 第五个图片 */
.content img:nth-of-type(5){
    margin-top: -240px;
    margin-left: 720px;
}

当然了，也可以将图片设置为浮动，然后在配合外边距也能达到效果。

通过定位实现布局

参考演示：https://antmoe.gitee.io/project/2020/03/23/index-position.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
/* 为父级容器开启相对定位 */
.content{
    position: relative;
}
/* 为所有图片开启绝对定位 */
.content img{
    position: absolute;
    top: 0;
}
/* 选择非第一张的所有图片 即四张小图 */
.content img:not(:first-child) {
    width: 240px;
    height: auto;
}
/* 选择第一张图片 */
.content img:first-child {
    width: 480px;
    height: auto;
}
.content img:nth-of-type(2){
    left: 600px;
}
.content img:nth-of-type(3){
    left: 840px;

}
.content img:nth-of-type(4){
    left: 600px;
    top: 240px;
}
.content img:nth-of-type(5){
    left: 840px;
    top: 240px;
}

实现页面其他内容

页面的基础布局无需过多说明。只是一些细节上的问题。

参考地址：https://antmoe.gitee.io/project/2020/03/24/index.html

关于底部微信二维码

微信二维码案例很简单，只是利用了一个鼠标悬停即可。

大概思路：将二维码内容作为备悬停图标的子元素，当鼠标悬停时找到子元素并为其设置样式即可。

至于底部的小三角可以加一个div为其设置边框即可实现。

  1. div 的宽高为 0

  2. 设置边框的宽度

  3. 设置边框样式

  4. 设置颜色

    border-color: white white white black;/* 左边为黑色 */

不完整代码

1
2
3
4
5
6
7
8
9
<div class="wechat">
    <div class="qr">
        <img
             src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/pay/wechat.png"
             alt=""
             />
        <div></div>
    </div>
</div>
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
.foot .icon .wechat:hover {
    background-image: url("https://ae01.alicdn.com/kf/H3f207c2c313649eb834fc918c9b46e20C.png");
}

.foot .icon .wechat .qr {
    position: absolute;
    width: 230px;
    height: 230px;
    border: 0px solid black;
    top: -266px;
    left: -92px;
    background-color: white;
    box-shadow: inset 0 0 2px black;
    transform: scale(0);
    transition: all 0.3s;
}

.foot .icon .wechat .qr img {
    width: 200px;
    height: auto;
    position: absolute;
    left: 15px;
    top: 15px;
}
.foot .icon .wechat .qr div {
    width: 0;
    height: 0;
    border-width: 20px;

    border-style: solid;
    border-color: white transparent transparent transparent;
    /* 左边为黑色 */
    position: absolute;
    left: 93px;
    top: 248px;
}

关于登录框

由于不会用到js所以html结构就显得尤为重要。至于弹出来的框框就比较简单了。姑且用以下结构。

1
2
3
<div class="login-dialog">
    <div class="close-login-box"></div>
</div>

然后通过对某个标签模拟点击（focus选择器）来弹出这个登录框。那么接下来，便遇到了一个问题：通过点击注册按钮来将上边的结构显示出来，那么点击的这个元素应该在哪呢？

很简单要想控制一个元素最简单的方法就是写在元素内部，但因为登录从逻辑上应该是全局的，不应该作为按钮的子级。所以这个登录框无疑是要与登录注册按钮的容器是平级的。

所以我们需要将登录框内的登录按钮拿出来那么也就有了

1
2
3
4
5
6
7
8
9
10
11
12
<div class="login-container">
    <!-- 写作的按钮 -->
    <div class="write">
        <div>
            <img src="https://cdn.jsdelivr.net/gh/blogimg/HexoStaticFile1/imgbed/2020/03/23/20200323195459.png"/>
        </div>
    </div>
</div>
<button class="login-focus">登录 / 注册</button>
<div class="login-dialog">
    <div class="close-login-box"></div>
</div>

如此一来便可以了。

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
.login-focus {
    width: 126px;
    height: 46px;
    border-radius: 23px;
    position: absolute;
    top: 22px;
    left: 1418px;
    z-index: 2;
    cursor: pointer;
    border: 1px solid #57ad68;
    text-align: center;
    line-height: 44px;
    font-size: 14px;
    font-weight: 300;
    color: #57ad68;
    outline: none;
    background: white;
}

.login-focus:hover {
    background-color: #57ad68;
    color: #fff;
}

.login-focus:focus ~ .login-dialog {
    transform: scale(1);
}

.login-dialog {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(0);
    transition: all 0.2s;
}

.login-dialog .close-login-box {
    background-image: url(https://ae01.alicdn.com/kf/H757f3e69cfef448e96b14e96c1bb8faeS.png);
    background-size: 20px;
    background-position: top right;
    background-repeat: no-repeat;
    height: 20px;
    margin-right: 25px;
    margin-top: 25px;
    cursor: pointer;
}

演示地址：https://antmoe.gitee.io/project/2020/03/24/index.html

图片叠层效果

效果展示如图：

伪元素实现

使用伪元素首先要搞清楚的就是伪元素的层级关系。伪元素与标签的层级关系是：after>before>标签元素

我们可以先做一个小demo做个测试。

演示地址：https://antmoe.gitee.io/project/2020/03/25/demo.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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>伪元素层级关系测试</title>
    <style>
      /* 为div设置样式 */
      .test {
        width: 150px;
        height: 150px;
        background-color: lightcoral;
        margin: 150px auto;
        position: relative;
      }

      /* 伪元素before */
      .test::before {
        content: "这是before元素";
        width: 150px;
        height: 150px;
        background-color: lightyellow;
        position: absolute;
        left: 70px;
      }

      /* 伪元素after */
      .test::after {
        content: "这是after元素";
        width: 150px;
        height: 150px;
        background-color: lightblue;
        position: absolute;
        left: 160px;
      }
    </style>
  </head>

  <body>
    <div class="test">这是标签</div>
  </body>
</html>

如果很清晰的可以看到三个div的层级关系。标签元素在最下边，标签元素的上方是before，在上边就是after元素了。

既然搞明白了他们的层级关系，那么接下来利用为元素实现层叠图片效果就很容易了。

效果中存在三张尺寸不同的图。那么最小的自然要用标签做了，做大的用after。这样就可以避免给伪元素调整层级的坑了。

演示地址：https://antmoe.gitee.io/project/2020/03/12/index.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
<!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>
        .container{
            margin: 100px auto;
            width: 300px;
        }
        /* 引入图片 */
        .container .radio-img{
            background: url(https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg);
            width: 240px;
            height: 240px;
            background-repeat: no-repeat;
            background-size: contain;
            border-radius: 2%;
            box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .2);
            position: relative;
            transform: rotate(-90deg);
        }
        /* 为after与before伪元素设置共同样式 */
        .radio-img::before,.radio-img::after{
            content: "";
            background: url(https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg);
            background-repeat: no-repeat;
            background-size: contain;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        
        .container .radio-img::before{
            width: 270px;
            height: 270px;
            border-radius: 2%;
            box-shadow: 0 10px 24px 0 rgba(0, 0, 0, .1);
            left: 10px;
            transform: translateY(-50%) rotate(180deg);
        }
        .container .radio-img::after{
            width: 300px;
            height: 300px;
            border-radius: 2%;
            box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .1);
            left: 20px;
            transform: translateY(-50%) rotate(90deg);
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 1. 使用::before和::after实现 -->
        <div class="radio-img"></div>
        <!-- 2. 使用三个img标签实现 -->
        <!-- <img src="http://pkicdn.image.alimmdn.com/old/newuploads/d02e858975daa236c3cb82231561fe69.jpg" alt="">
        <img src="http://pkicdn.image.alimmdn.com/old/newuploads/d02e858975daa236c3cb82231561fe69.jpg" alt="">
        <img src="http://pkicdn.image.alimmdn.com/old/newuploads/d02e858975daa236c3cb82231561fe69.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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片叠层效果</title>
    <style>
      .container {
        margin: 200px auto;
        width: 300px;
        position: relative;
      }
      /* 默认的图片样式 */
      .container img {
        position: absolute;
        width: 300px;
        height: 300px;
        left: 50%;
        transform: translateX(-50%);
      }
      .container img:nth-of-type(1) {
        width: 240px;
        height: 240px;
        border-radius: 2%;
        box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
        transform: translateX(-50%) rotate(-90deg);
        top: 60px;
      }
      .container img:nth-of-type(2) {
        width: 270px;
        height: 270px;
        border-radius: 2%;
        box-shadow: 0 10px 24px 0 rgba(0, 0, 0, 0.1);
        transform: translateX(-50%) rotate(90deg);
        top: 40px;
      }
      .container img:nth-of-type(3) {
        width: 300px;
        height: 300px;
        border-radius: 2%;
        box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.1);
      }
    </style>
  </head>

  <body>
    <div class="container">
      <img
        src="https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg"
      />
      <img
        src="https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg"
      />
      <img
        src="https://ae01.alicdn.com/kf/U0a5fce922da54a278213b077d869bb81o.jpg"
      />
    </div>
  </body>
</html>

演示地址：https://antmoe.gitee.io/project/2020/03/12/index-img.html

轮播图示例

演示地址：https://antmoe.gitee.io/project/2020/03/25/slide.html

实现思路

两侧旁的按钮可以参考2020-03-17小米轮播图示例。

主要是利用checked伪类判断那一个被选中，然后切换图片。

动画效果方面：首先默认布局应该是中间的变大，左右一边一个。

当被选中后，那么移动到中间，并且原来放大的图移动到右边，右边移动到左边。这样实现一个反复的过程即可。

所以实现起来就很简单了。首先调整好默认位置

1
2
3
4
5
6
.imgList img:nth-of-type(2) {
    left: 50px;
}
.imgList img:nth-of-type(3) {
    left: 530px;
}

其次就是设置点击时的样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#slide3:checked ~ .imgList img:nth-of-type(3),
#slide2:checked ~ .imgList img:nth-of-type(2),
#slide1:checked ~ .imgList img:nth-of-type(1) {
    width: 640px;
    height: 375px;
    z-index: 8;
    left: 200px;
}
#slide2:checked ~ .imgList img:nth-of-type(3){
    left: 0px;
}
#slide2:checked ~ .imgList img:nth-of-type(1){
    left: 530px;
}
#slide3:checked ~ .imgList img:nth-of-type(1){
    left: 0px;
}
#slide3:checked ~ .imgList img:nth-of-type(2){
    left: 530px;
}

完整代码示例

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图示例</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .container {
        width: 1226px;
        height: 460px;
        background: lightcyan;
        margin: 100px auto;
        position: relative;
      }

      .container .imgList {
        width: 100%;
        position: relative;
      }

      .container .imgList img {
        display: block;
        position: absolute;
        left: 210px;
        top: 0;
        transition: opacity 1s;
        z-index: 0;
        margin-left: 80px;
        width: 493px;
        height: 289px;
        transition: all 1s;
      }

      .slide {
        width: 41px;
        height: 69px;
        background-image: url("https://i1.mifile.cn/f/i/2014/cn/icon/icon-slides.png");
        background-repeat: no-repeat;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
        display: none;
        cursor: pointer;
      }
      /* 
    使用focus伪类模拟点击事件的效果
    1. html结构：必须有input 和 label 且input的id与label的for相匹配
    2. css样式：input:focus
     */

      #slide3:checked ~ .imgList img:nth-of-type(3),
      #slide2:checked ~ .imgList img:nth-of-type(2),
      #slide1:checked ~ .imgList img:nth-of-type(1) {
        width: 640px;
        height: 375px;
        z-index: 8;
        left: 200px;
      }
      #slide2:checked ~ .imgList img:nth-of-type(3){
        left: 0px;
      }
      #slide2:checked ~ .imgList img:nth-of-type(1){
        left: 530px;
      }
      #slide3:checked ~ .imgList img:nth-of-type(1){
        left: 0px;
      }
      #slide3:checked ~ .imgList img:nth-of-type(2){
        left: 530px;
      }
      #slide3:checked ~ label:nth-of-type(1),
      #slide2:checked ~ label:nth-of-type(3),
      #slide1:checked ~ label:nth-of-type(2) {
        display: block;
        right: 0;
        background-position: -125px;
      }
      /* 鼠标悬停改变雪碧图位置 */
      #slide3:checked ~ label:nth-of-type(1):hover,
      #slide2:checked ~ label:nth-of-type(3):hover,
      #slide1:checked ~ label:nth-of-type(2):hover {
        background-position: -41px;
      }

      #slide3:checked ~ label:nth-of-type(2),
      #slide2:checked ~ label:nth-of-type(1),
      #slide1:checked ~ label:nth-of-type(3) {
        display: block;
        left: 0;
        background-position: -84px;
      }
      /* 鼠标悬停改变雪碧图位置 */

      #slide3:checked ~ label:nth-of-type(2):hover,
      #slide2:checked ~ label:nth-of-type(1):hover,
      #slide1:checked ~ label:nth-of-type(3):hover {
        background-position: 0px;
      }
      input {
        display: none;
      }
      .imgList img:nth-of-type(1) {
        z-index: 6;
      }
      .imgList img:nth-of-type(2) {
        z-index: 6;
        left: 50px;
      }
      .imgList img:nth-of-type(3) {
        z-index: 6;
        left: 530px;
      }
    </style>
  <script type="text/javascript" nonce="87b7771a28d14d038ca2d7487a1" src="//local.adguard.org?ts=1585142143099&amp;type=content-script&amp;dmn=antmoe.gitee.io&amp;css=1&amp;js=1&amp;gcss=1&amp;rel=1&amp;rji=1&amp;stealth=1&amp;uag=TW96aWxsYS81LjAgKFdpbmRvd3MgTlQgMTAuMDsgV2luNjQ7IHg2NCkgQXBwbGVXZWJLaXQvNTM3LjM2IChLSFRNTCwgbGlrZSBHZWNrbykgQ2hyb21lLzgyLjAuMzk4Ny4xNDkgU2FmYXJpLzUzNy4zNg=="></script>
<script type="text/javascript" nonce="87b7771a28d14d038ca2d7487a1" src="//local.adguard.org?ts=1585142143099&amp;name=AdGuard%20Popup%20Blocker&amp;name=AdGuard%20Assistant&amp;name=AdGuard%20Extra&amp;type=user-script"></script></head>

  <body>
    <!-- 视觉容器 -->
    <div class="container">
      <!-- 左右切换菜单 -->
      <input type="radio" name="slide" id="slide1" checked />
      <input type="radio" name="slide" id="slide2" />
      <input type="radio" name="slide" id="slide3" />
      <label for="slide1" class="slide slide1"></label>
      <label for="slide2" class="slide slide2"></label>
      <label for="slide3" class="slide slide3"></label>
      <!-- 图片列表 -->
      <div class="imgList">
        <img
          src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg"
        />
        <img
          src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg"
        />
        <img
          src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg"
        />
      </div>
      <!-- 轮播图的导航  已废-->
      <div class="nav"></div>
    </div>
  </body>
</html>

轮播图静态布局

一种是比较常规的2d布局。也就是通过定位的方式将三张图片排列开，然后通过层级控制要显示的图片为最高层级。并设置宽高。

演示地址：https://antmoe.gitee.io/project/2020/03/28/static-2d.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
<!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>
        .container {
            width: 1130px;
            height: 400px;
            margin: 100px auto 0;
            position: relative;
        }

        .img-list {
            width: 960px;
            height: 400px;
            
            margin: 0 auto;
            position: relative;

        }
        .img-list  img{
            display: block;
            width: 493px;
            height: 289px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .img-list  img:nth-child(1){
            left: 0;
        }.img-list  img:nth-child(2){
            right: 0;
        }
        .img-list  img:nth-child(3){
            left: 50%;
            transform: translate(-50%,-50%);
        }
        img.active{
            width: 660px;
            height: 375px;
            border-left: 10px solid #fafafa;
            border-right: 10px solid #fafafa;
        }
        .change-btn {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: .5;

        }

        .change-btn .left,
        .change-btn .right {
            width: 24px;
            height: 48px;
            cursor: pointer;
            background-repeat: no-repeat;
            background-size: 24px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

        }

        .change-btn .left {
            background-image: url(https://ae01.alicdn.com/kf/H44c3bc284cbe433ebf6dd85ba5d64285K.png);
        }

        .change-btn .right {
            background-image: url(https://ae01.alicdn.com/kf/Ha25bd5de08d04584b43182b22a7ec9bbK.png);
            right: 0;
        }

        .nav-line {
            width: 108px;
            height: 1px;
            background-color: #e8e8e8;
            position: absolute;
            bottom: 0;
            right: 85px;
        }
        .nav-line div{
            width: 36px;
            height: 1px;
            float: left;
            cursor: pointer;
        }
        .nav-line div.active{
            background-color: #333;
        }
    </style>

</head>

<body>
    <!-- 视觉窗口 -->
    <div class="container">
        <!-- 图片列表 -->
        <div class="img-list">
            <img src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg" />
            <img src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg" />
            <img class="active" src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg" />
        </div>
        <!-- 左右切换 -->
        <div class="change-btn">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <!-- 导航器 -->
        <div class="nav-line">
            <div></div>
            <div></div>
            <div class="active"></div>
        </div>
    </div>
</body>

</html>

另一种方法就是使用3d的方法实现布局。为父级设置perspective属性后，利用translateZ控制图的大小。

演示地址：https://antmoe.gitee.io/project/2020/03/28/static-3d.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
<!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>
        .container {
            width: 1130px;
            height: 400px;
            margin: 100px auto 0;
            position: relative;
        }

        .img-list {
            width: 960px;
            height: 400px;
            perspective: 800px;
            margin: 0 auto;
            position: relative;
            

        }
        .img-list  img{
            display: block;
            width: 493px;
            height: 289px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .img-list  img:nth-child(1){
            left: 0;
        }.img-list  img:nth-child(2){
            right: 0;
        }
        .img-list  img:nth-child(3){
            left: 50%;
            /* transform: translate(-50%,-50%); */
        }
        img.active{
            transform: translate3d(-50%,-50%,160px);
            border-left: 10px solid #fafafa;
            border-right: 10px solid #fafafa;
        }
        .change-btn {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            opacity: .5;

        }

        .change-btn .left,
        .change-btn .right {
            width: 24px;
            height: 48px;
            cursor: pointer;
            background-repeat: no-repeat;
            background-size: 24px;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

        }

        .change-btn .left {
            background-image: url(https://ae01.alicdn.com/kf/H44c3bc284cbe433ebf6dd85ba5d64285K.png);
        }

        .change-btn .right {
            background-image: url(https://ae01.alicdn.com/kf/Ha25bd5de08d04584b43182b22a7ec9bbK.png);
            right: 0;
        }

        .nav-line {
            width: 108px;
            height: 1px;
            background-color: #e8e8e8;
            position: absolute;
            bottom: 0;
            right: 85px;
        }
        .nav-line div{
            width: 36px;
            height: 1px;
            float: left;
            cursor: pointer;
        }
        .nav-line div.active{
            background-color: #333;
        }
    </style>

</head>

<body>
    <!-- 视觉窗口 -->
    <div class="container">
        <!-- 图片列表 -->
        <div class="img-list">
            <img src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg" />
            <img src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg" />
            <img class="active" src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg" />
        </div>
        <!-- 左右切换 -->
        <div class="change-btn">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <!-- 导航器 -->
        <div class="nav-line">
            <div></div>
            <div></div>
            <div class="active"></div>
        </div>
    </div>
</body>

</html>

动态轮播图

实现方法同小米轮播图较为类似。

同样的需要利用input+label实现对图片的控制。但与小米轮播图不同时的，这个轮播图不可以用透明度设置，因为三张图片都是显示的。

演示地址：https://antmoe.gitee.io/project/2020/03/28/slide.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
<!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>
      .container {
        width: 1130px;
        height: 400px;
        margin: 100px auto 0;
        position: relative;
      }

      .container input {
        display: none;
      }

      .img-list {
        width: 960px;
        height: 400px;

        margin: 0 auto;
        position: relative;
      }

      .img-list img {
        display: block;
        width: 493px;
        height: 289px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.6s linear;
      }
      .change-btn {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
      }

      .change-btn label {
        height: 48px;
        cursor: pointer;
        background-repeat: no-repeat;
        background-size: 24px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
      }

      /* 显示在左边的切换按钮 */

      #slide1:checked ~ .change-btn label:nth-child(2),
      #slide2:checked ~ .change-btn label:nth-child(3),
      #slide3:checked ~ .change-btn label:nth-child(1) {
        background-image: url(https://ae01.alicdn.com/kf/H44c3bc284cbe433ebf6dd85ba5d64285K.png);
        width: 24px;
      }

      /* 显示在右边的切换按钮 */
      #slide1:checked ~ .change-btn label:nth-child(3),
      #slide2:checked ~ .change-btn label:nth-child(1),
      #slide3:checked ~ .change-btn label:nth-child(2) {
        background-image: url(https://ae01.alicdn.com/kf/Ha25bd5de08d04584b43182b22a7ec9bbK.png);
        right: 0;
        width: 24px;
      }

      .nav-line {
        width: 108px;
        height: 1px;
        background-color: #e8e8e8;
        position: absolute;
        bottom: 0;
        right: 85px;
      }

      .nav-line label {
        width: 36px;
        height: 1px;
        float: left;
        cursor: pointer;
      }

      /* 轮播图的导航器 */
      #slide1:checked ~ .nav-line label:nth-child(1),
      #slide2:checked ~ .nav-line label:nth-child(2),
      #slide3:checked ~ .nav-line label:nth-child(3) {
        background-color: #333;
      }

      /* 动态交互 */
      /* 显示在中间的图片 */
      #slide1:checked ~ .img-list img:nth-child(1),
      #slide2:checked ~ .img-list img:nth-child(2),
      #slide3:checked ~ .img-list img:nth-child(3) {
        width: 660px;
        height: 375px;
        border-left: 10px solid #fafafa;
        border-right: 10px solid #fafafa;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
      }
      /* 显示在右边的图片 */
      #slide1:checked ~ .img-list img:nth-child(2),
      #slide2:checked ~ .img-list img:nth-child(3),
      #slide3:checked ~ .img-list img:nth-child(1) {
        left: 467px;
        z-index: 0;
      }
      /* 显示左边的图片 */
      #slide1:checked ~ .img-list img:nth-child(3),
      #slide2:checked ~ .img-list img:nth-child(1),
      #slide3:checked ~ .img-list img:nth-child(2) {
        left: 0;
        z-index: 0;
      }
    </style>
  </head>

  <body>
    <!-- 视觉窗口 -->
    <div class="container">
      <input type="radio" name="slides" id="slide1" checked />
      <input type="radio" name="slides" id="slide2" />
      <input type="radio" name="slides" id="slide3" />
      <!-- 图片列表 -->
      <div class="img-list">
        <img
          src="https://ae01.alicdn.com/kf/H0b1eb310ce894aa08f9b4807d1bf3ca4x.jpg"
        />
        <img
          src="https://ae01.alicdn.com/kf/Heaf789203f4147f0b5114a23c618c643K.jpg"
        />
        <img
          class="active"
          src="https://ae01.alicdn.com/kf/H50df113bb77145aca87f6762a035d358m.jpg"
        />
      </div>
      <!-- 左右切换 -->
      <div class="change-btn">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
      </div>
      <!-- 导航器 -->
      <div class="nav-line">
        <label for="slide1"></label>
        <label for="slide2"></label>
        <label for="slide3"></label>
      </div>
    </div>
  </body>
</html>