片刻网项目

Dreamy.TZK

发布于 2020-04-09 15:54:38

8680

发布于 2020-04-09 15:54:38

文章被收录于专栏：小康的自留地

片刻网项目

复习回顾——页面布局

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

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

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

<!-- 黑色的大容器 -->
<header class="head">
    <!-- 红色部分 -->
    <div class="container">
        <!-- 绿色部分 -->
        <div class="logo"></div>
        <!-- 蓝色部分 -->
        <div class="nav"></div>
        <!-- 紫色部分 -->
        <div class="login"></div>
    </div>
</header>

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

.head {
    width: 100%;
}

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

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

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

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

/* 左侧绿色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;
}

第一种方案：通过浮动实现 这种方法很简单。第一步：左侧与中间设置为浮动第二步：调整中间距离左侧的距离（margin-left）第三步：右侧使用右浮动即可。 .head .container .logo, .head .container .nav{ float: left; } .head .container .nav{ margin-left: 20px; } .head .container .login{ float: right; } 参考演示：https://gethtml.cn/project/2020/03/23/center-1.html
第二种方案：定位这种方法也很容易理解。第一步：为父级容器开启相对定位（因为不脱离文档流）第二步：为每个子集元素（绿蓝紫div）设置绝对定位。第三步：利用top、left调整每个div的位置。 /* 为父级开启相对定位 */ .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://gethtml.cn/project/2020/03/23/center-2.html
第三种方案：利用表格 这种方法也很简单。第一步：将父级的显示为表格第二步：子级显示为单元格 /* 将父级的显示为表格 */ .head .container { display: table; } /* 子级显示为单元格 */ .head .container .login, .head .container .logo, .head .container .nav { display: table-cell; }

但是这个方法存在一些问题,如图，使用表格后会默认将其填充满，无法使用宽高进行设置。解决方法也很简单，使用内边距即可解决位置问题。因为不需要使用背景色，所以在效果上是看不出来问题的。参考演示：https://gethtml.cn/project/2020/03/23/center-3.html

第四种方案：外边距 这种方法简单暴力。利用margin-top、margin-left即可调整各元素的位置。 .head .container .nav { margin-left: 180px; } .head .container .login, .head .container .nav { margin-top: -90px; } .head .container .login { margin-left: 1000px; } 参考演示：https://gethtml.cn/project/2020/03/23/center-4.html
第五种方案：内联元素 这种方法利用行内块级元素的特性可以实现。 /* 将元素设置为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://gethtml.cn/project/2020/03/23/center-5.html

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

实现片刻网的导航栏

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

参考演示：https://gethtml.cn/project/2020/03/23/index1.html

<!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://gethtml.cn/project/2020/03/23/index.html

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

所以我们的html可以为

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

样式表为以下

/* 聚焦图片 */
.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结构改为

<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://gethtml.cn/project/2020/03/23/index-margin.html

.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://gethtml.cn/project/2020/03/23/index-position.html

/* 为父级容器开启相对定位 */
.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://gethtml.cn/project/2020/03/24/index.html

关于底部微信二维码

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

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

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

div 的宽高为 0
设置边框的宽度
设置边框样式
设置颜色 border-color: white white white black;/* 左边为黑色 */

不完整代码

<div class="wechat">
    <div class="qr">
        <img
             src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@master/pay/wechat.png"
             alt=""
             />
        <div></div>
    </div>
</div>

.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结构就显得尤为重要。至于弹出来的框框就比较简单了。姑且用以下结构。

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

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

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

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

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

如此一来便可以了。

.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://gethtml.cn/project/2020/03/24/index.html

图片叠层效果

效果展示如图：

伪元素实现

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

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

测试代码

演示地址：https://gethtml.cn/project/2020/03/25/demo.html

例如：

<!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://gethtml.cn/project/2020/03/12/index.html

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

利用图片元素实现

利用图实现较为简单。因为图片可以对每一张单独设置，而无需考虑层级问题。

<!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://gethtml.cn/project/2020/03/12/index-img.html

轮播图示例

演示地址：https://gethtml.cn/project/2020/03/25/slide.html

实现思路

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

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

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

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

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

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

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

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

完整代码示例

<!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=gethtml.cn&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://gethtml.cn/project/2020/03/28/static-2d.html

<!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://gethtml.cn/project/2020/03/28/static-3d.html

<!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://gethtml.cn/project/2020/03/28/slide.html

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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-03-23，如有侵权请联系 cloudcommunity@tencent.com 删除

html