0
0

HTML5+CSS3实现小米商城 （完整版）

前言

对于小米商城，也是自己初学前端的一个小作品吧，这个网页大概写了有三四天吧，总体感受就是写着还行，只要有耐心，就一定能成功。

一 、网页分析

1. 头部导航栏。

2. 两边的侧边栏。

3.中间的轮播图。

4.下面的广告部分。

二 、效果展示

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三 、代码分析

注 ：因为代码较多，这里展示部分，全部代码 放在下方 链接网盘里。

1. 轮播图部分

  1.  .head3 {  // CSS部分
  2.          width: 1226px;
  3.          margin-left: 146px;
  4.          margin-right: 146px;
  5.          height: 400px;
  6.          margin-top: 14px;
  7.          margin-bottom: 35px;
  8.          overflow: hidden;
  9.          float: left;
  10.      }
  12.      .head3_lunbo {
  13.          width: 4904px;
  14.          height: 400px;
  15.          animation: text 15s infinite backwards;
  16.          /*消除图片间隔*/
  18.      }
  20.      .head3_lunbo img {
  21.          width: 1226px;
  22.          height: 400px;
  23.          float: left;
  24.      }
  26.      @keyframes text {
  28.          /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
  29.          0%,
  30.          20% {
  31.              margin-left: 0px;
  32.          }
  34.          25%,
  35.          45% {
  36.              margin-left: -1226px;
  37.          }
  39.          50%,
  40.          70% {
  41.              margin-left: -2452px;
  42.          }
  44.          75%,
  45.          100% {
  46.              margin-left: -3678px;
  47.          }
  48.      }
  1.  <div class="head3_lunbo">
  2.                 <!-- 引入轮播图图片 -->
  3.                 <a href="#" target="_blank"><img src="ding1.jpg" /></a>
  4.                 <a href="#" target="_blank"><img src="ding2.webp" /></a>
  5.                 <a href="#" target="_blank"><img src="ding3.webp" /></a>
  6.                 <a href="#" target="_blank"><img src="ding4.webp" /></a>
  7.             </div>

2. 广告块部分

  2. <!-- 手机模块  HTML-->
  3.             <div class="con2">
  4.                 <div class="con2_1">
  5.                     <span class="con2_1_s1">手机</span>
  6.                     <a class="con2_1_a" href="#">
  7.                         <span class="con2_1_s2">查看更多</span>
  8.                         <span class="con2_1_img"></span>
  9.                     </a>
  10.                 </div>
  11.                 <div class="con2_2">
  12.                     <div class="con2_2_1">
  13.                         <a href="#">
  14.                             <img src="shouji.png" style="height: 631px;">
  15.                         </a>
  16.                     </div>
  17.                     <div class="con2_2_2">
  18.                         <div class="con2_2_2_div">
  19.                             <a class="con2_2_a" href="#">
  20.                                 <img class="con2_2_2_img" src="shouji1.webp">
  21.                                 <h4 class="con2_2_h">Xiaomi 12S Ultra</h4>
  22.                                 <p class="con2_2_p1">这真徕卡&nbsp;&nbsp;|&nbsp;&nbsp;专业徕卡影像</p>
  23.                                 <!-- <p style="text-decoration: line-through" class="con2_2_p2">5999元起</p> -->
  24.                                 <span class="huadiao_1">9.9元起</span>
  25.                                 <span class="huadiao_2">5999元起</span>
  26.                             </a>
  27.                         </div>
  28.                         <div class="con2_2_2_div">
  29.                             <a class="con2_2_a" href="#">
  30.                                 <img class="con2_2_2_img" src="shouji2.webp">
  31.                                 <h4 class="con2_2_h">Xiaomi 12S Pro</h4>
  32.                                 <p class="con2_2_p1">骁龙8+ 旗舰处理器&nbsp;&nbsp;|&nbsp;&nbsp;徕卡影像
  33.                                 </p>
  34.                                 <span class="huadiao_1">8.8元起</span>
  35.                                 <span class="huadiao_2">5999元起</span>
  36.                             </a>
  37.                         </div>
  38.                         <div class="con2_2_2_div">
  39.                             <a class="con2_2_a" href="#">
  40.                                 <img class="con2_2_2_img" src="shouji3.webp">
  41.                                 <h4 class="con2_2_h">Xiaomi 12S</h4>
  42.                                 <p class="con2_2_p1">小尺寸性能旗舰&nbsp;&nbsp;|&nbsp;&nbsp;徕卡影像
  43.                                 </p>
  44.                                 <p class="con2_2_p2">3999元起</p>
  45.                             </a>
  46.                         </div>
  47.                         <div class="con2_2_2_div">
  48.                             <a class="con2_2_a" href="#">
  49.                                 <img class="con2_2_2_img" src="shouji4.webp">
  50.                                 <h4 class="con2_2_h">Xiaomi 12S Pro 天玑版</h4>
  51.                                 <p class="con2_2_p1 ">
  52.                                     全球首发天玑9000+&nbsp;&nbsp;|&nbsp;&nbsp;叶脉冷泵散热系统超强</p>
  53.                                 <p class="con2_2_p2">3999元起</p>
  54.                             </a>
  55.                         </div>
  56.                         <div class="con2_2_2_div">
  57.                             <a class="con2_2_a" href="#">
  58.                                 <img class="con2_2_2_img" src="shouji5.webp">
  59.                                 <h4 class="con2_2_h">Redmi Note 11T Pro+</h4>
  60.                                 <p class="con2_2_p1">天玑8100&nbsp;&nbsp;|&nbsp;&nbsp;真旗舰芯</p>
  61.                                 <span class="huadiao_1">61.88元起</span>
  62.                                 <span class="huadiao_2">5999元起</span>
  63.                             </a>
  64.                         </div>
  65.                         <div class="con2_2_2_div">
  66.                             <a class="con2_2_a" href="#">
  67.                                 <img class="con2_2_2_img" src="shouji6.webp">
  68.                                 <h4 class="con2_2_h">Redmi Note 11T Pro</h4>
  69.                                 <p class="con2_2_p1">天玑8100&nbsp;&nbsp;|&nbsp;&nbsp;真旗舰芯</p>
  70.                                 <p class="con2_2_p2">1699元起</p>
  71.                             </a>
  72.                         </div>
  73.                         <div class="con2_2_2_div">
  74.                             <a class="con2_2_a" href="#">
  75.                                 <img class="con2_2_2_img" src="shouji7.webp">
  76.                                 <h4 class="con2_2_h">Redmi Note 11SE</h4>
  77.                                 <p class="con2_2_p1">双卡双5G&nbsp;&nbsp;|&nbsp;&nbsp;疾速登陆</p>
  78.                                 <span class="huadiao_1">0.01元起</span>
  79.                                 <span class="huadiao_2">5999元起</span>
  80.                             </a>
  81.                         </div>
  82.                         <div class="con2_2_2_div">
  83.                             <a class="con2_2_a" href="#">
  84.                                 <img class="con2_2_2_img" src="shouji8.webp">
  85.                                 <h4 class="con2_2_h">Xiaomi Civi 1S</h4>
  86.                                 <p class="con2_2_p1 " style="margin-left:0px;">
  87.                                     原生美肌人像&nbsp;&nbsp;|&nbsp;&nbsp;奇迹阳光动人新色&nbsp;&nbsp;|&nbsp;&nbsp;旗舰神机器</p>
  88.                                 <p class="con2_2_p2">2299元起</p>
  89.                             </a>
  90.                         </div>
  91.                     </div>
  92.                 </div>
  93.             </div>
  1.  .con2 {  // CSS部分
  2.          width: 1226px;
  3.          height: 672px;
  4.      }
  6.      .con2_1 {
  7.          width: 1226px;
  8.          height: 58px;
  9.      }
  11.      .con2_1_a {
  12.          display: inline-block;
  13.          text-decoration: none;
  14.      }
  16.      .con2_1_img {
  17.          display: inline-block;
  18.          background-image: url(xiala.jpg);
  19.          background-repeat: no-repeat;
  20.          width: 38px;
  21.          height: 34px;
  22.          position: relative;
  23.          top: 10px;
  24.      }
  26.      .con2_1_s1 {
  27.          font-size: 24px;
  28.          margin-right: 1050px;
  29.          line-height: 58px;
  30.          font-weight: 150;
  31.      }
  33.      .con2_1_s2 {
  34.          color: #454349;
  35.          /* margin-bottom: 5px; */
  36.          /* float: right; */
  37.      }
  39.      .con2_1_s2:hover {
  40.          color: #ff6700;
  41.      }
  43.      .con2_2 {
  44.          width: 1226px;
  45.          height: 641px;
  46.      }
  48.      .con2_2_1 {
  49.          display: inline-block;
  50.          width: 224px;
  51.          height: 641px;
  52.          margin-top: 10px;
  53.          margin-right: 14px;
  54.          transition: all .2s linear;
  55.      }
  57.      .con2_2_1_plus {
  58.          display: inline-block;
  59.          width: 224px;
  60.          height: 61px;
  61.          margin-top: 10px;
  62.          margin-right: 14px;
  63.          /* transition: all .2s linear; */
  64.      }
  66.      .con2_2_1_pro {
  67.          display: inline-block;
  68.          width: 224px;
  69.          height: 61px;
  70.          margin-top: 10px;
  71.          margin-right: 14px;
  72.          /* transition: all .2s linear; */
  73.      }
  75.      /* .con2_2_1:hover {
  76.          box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1);
  77.          margin-top: 8px;
  78.      } */
  80.      .con2_2_2 {
  81.          width: 973px;
  82.          height: 641px;
  83.          /* background-color: blue; */
  84.          /* position: relative; */
  85.          display: -webkit-flex;
  86.          display: flex;
  87.          /* -webkit-flex-wrap: wrap; */
  88.          flex-wrap: wrap;
  89.          float: right;
  90.          align-content: space-between;
  91.          justify-content: space-between;
  92.      }
  94.      .con2_2_2_div {
  95.          display: inline-block;
  96.          width: 230px;
  97.          height: 308px;
  98.          background-color: #ffffff;
  99.          margin-top: 10px;
  100.          /* display: block; */
  101.          transition: all .2s linear;
  102.      }
  104.      .con2_2_2_div:hover {
  105.          box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1);
  106.          margin-top: 8px;
  107.          /* margin-bottom: 8px; */
  108.      }
  110.      .con2_2_2_div_plus {
  111.          margin-top: 50px;
  112.          display: inline-block;
  113.          width: 230px;
  114.          height: 30px;
  115.          background-color: #ffffff;
  116.          /* margin-top: 10px; */
  117.          /* display: block; */
  118.      }
  120.      .con2_2_a {
  121.          display: inline-block;
  122.          width: 230px;
  123.          height: 308px;
  124.          text-decoration: none;
  125.      }
  127.      .con2_2_2_img {
  128.          width: 150px;
  129.          height: 165px;
  130.          margin-left: 40px;
  131.          margin-top: 20px;
  132.      }
  134.      .con2_2_h {
  135.          color: #444444;
  136.          font-weight: 500;
  137.          font-size: 15px;
  138.          /* margin-left: 56px; */
  139.          white-space: nowrap;
  140.          overflow: hidden;
  141.          text-overflow: ellipsis;
  142.          text-align: center;
  143.      }
  145.      .con2_2_p1 {
  146.          font-size: 12px;
  147.          color: #b1b0b1;
  148.          /* margin-left: 45px; */
  149.          margin-top: 7px;
  150.          white-space: nowrap;
  151.          overflow: hidden;
  152.          text-overflow: ellipsis;
  153.          text-align: center;
  154.      }
  156.      .con2_2_p2 {
  157.          font-size: 15px;
  158.          color: #ff6c0d;
  159.          /* margin-left: 79px; */
  160.          margin-top: 10px;
  161.          text-align: center;
  162.      }

3. 右侧固定栏

  1.  <!-- HTML部分 --! >
  2.   <div class="cebian">
  3.            <div class="cebian_1">
  4.                <a href="#">
  5.                    <img src="cebian1.png">
  6.                    <p>手机APP</p>
  7.                </a>
  8.                <div class="cebian_2" style="width: 150px;height: 180px;">
  9.                    <img src="erweima.png" style="width:80px ;height:80px;">
  10.                    <p style="margin-top: 10px;">扫码领取新</p>
  11.                    <p>人百元红包</p>
  12.                </div>
  13.            </div>
  14.            <div><a href="#">
  15.                    <img src="cebian2.png">
  16.                    <p>个人中心</p>
  17.                </a></div>
  18.            <div><a href="#">
  19.                    <img src="cebian3.png">
  20.                    <p>售后服务</p>
  21.                </a></div>
  22.            <div><a href="#">
  23.                    <img src="cebian4.png">
  24.                    <p>人工服务</p>
  25.                </a></div>
  26.            <div><a href="#" class="cebiandiv">
  27.                    <img src="cebian5.png">
  28.                    <p>购物车</p>
  29.                </a></div>
  30.        </div>
  1.  // CSS部分
  2.  .cebian {
  3.          position: fixed;
  4.          width: 94px;
  5.          height: 455px;
  6.          top: 40px;
  7.          background-color: #ffffff;
  8.          left: 1423px;
  9.          border-left: 1px solid #f6f6f6;
  10.          border-bottom: 1px solid #f6f6f6;
  11.          border-top: 1px solid #f6f6f6;
  12.      }
  14.      .cebian div {
  15.          width: 94px;
  16.          height: 91px;
  17.          border-bottom: 1px solid #f6f6f6;
  19.      }
  21.      .cebian_1 {
  22.          width: 94px;
  23.          height: 91px;
  24.          border-bottom: 1px solid #f6f6f6;
  25.          z-index: 5;
  26.      }
  28.      .cebian_2 {
  29.          /* padding: 14px; */
  30.          background-color: #ffffff;
  31.          position: absolute;
  32.          left: -150px;
  33.          top: -1px;
  34.          border-bottom: 1px solid #f6f6f6;
  35.          display: none;
  36.          z-index: 5;
  37.      }
  39.      .cebian_1:hover .cebian_2 {
  40.          display: block;
  41.          z-index: 5;
  42.      }
  44.      .cebiandiv {
  45.          border-bottom: 1px solid #f5f5f5;
  46.      }
  48.      .cebian img {
  49.          margin-top: 18px;
  50.          margin-left: 32px;
  51.          /* margin: 0 auto; */
  52.          width: 30px;
  53.          height: 30px;
  54.      }
  56.      .cebian p {
  57.          color: #999999;
  58.          text-align: center;
  59.      }
  61.      .cebian a {
  62.          display: inline-block;
  63.          text-decoration: none;
  64.          width: 94px;
  65.          height: 91px;
  67.      }
  69.      .cebian p:hover {
  70.          color: #ff6700;
  71.      }

4.左侧导航栏

  1. <!--HTML部分--!>
  2.               <div class="head3_div1">
  3.                 <div class="head3_div1_1">
  4.                     <span class="head3_div1_s">
  5.                         <span class="head3_div1_s1">手机</span>
  6.                         <span class="head3_div1_s2"></span>
  7.                     </span>
  8.                     <div class="head3_div1_1_2">
  9.                         <span class="head3_div1_1_2s">
  10.                             <img src="shouji1.webp">
  11.                             <span>Xiaomi 12S</span>
  12.                         </span>
  13.                         <span class="head3_div1_1_2s">
  14.                             <img src="shouji1.webp">
  15.                             <span>Redmi 10A</span>
  16.                         </span>
  17.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  18.                             <span>Xiaomi 12S</span>
  19.                         </span>
  20.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  21.                             <span>Xiaomi 12S</span>
  22.                         </span>
  23.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  24.                             <span>iphone 13</span>
  25.                         </span>
  26.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  27.                             <span>Xiaomi 12S</span>
  28.                         </span>
  29.                         <span class="head3_div1_1_2s"><img src="shouji4.webp">
  30.                             <span>Xiaomi 12S</span>
  31.                         </span>
  32.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  33.                             <span>Xiaomi 12S</span>
  34.                         </span>
  35.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  36.                             <span>Redmi K50</span>
  37.                         </span>
  38.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  39.                             <span>Xiaomi 12S</span>
  40.                         </span>
  41.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  42.                             <span>Xiaomi 12S</span>
  43.                         </span>
  44.                         <span class="head3_div1_1_2s"><img src="shouji4.webp">
  45.                             <span>Xiaomi 12S</span>
  46.                         </span>
  47.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  48.                             <span>Note 11 4G</span>
  49.                         </span>
  50.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  51.                             <span>Xiaomi 12S</span>
  52.                         </span>
  53.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  54.                             <span>Xiaomi 12S</span>
  55.                         </span>
  56.                         <span class="head3_div1_1_2s"><img src="shouji4.webp">
  57.                             <span>Redmi K40S</span>
  58.                         </span>
  59.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  60.                             <span>Xiaomi 12S</span>
  61.                         </span>
  62.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  63.                             <span>Xiaomi 12S</span>
  64.                         </span>
  65.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  66.                             <span>Xiaomi 12S</span>
  67.                         </span>
  68.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  69.                             <span>黑鲨5</span>
  70.                         </span>
  71.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  72.                             <span>Xiaomi 12S</span>
  73.                         </span>
  74.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  75.                             <span>Note 11T Pro</span>
  76.                         </span>
  77.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  78.                             <span>Xiaomi 12S</span>
  79.                         </span>
  80.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  81.                             <span>Xiaomi Civi</span>
  82.                         </span>
  83.                     </div>
  84.                 </div>
  86.                 <div class="head3_div1_2">
  87.                     <span class="head3_div2_s">
  88.                         <span class="head3_div1_s1">电视</span>
  89.                         <span class="head3_div1_s2"></span>
  90.                     </span>
  91.                     <div class="head3_div2_1_2">
  92.                         <span class="head3_div1_1_2s">
  93.                             <img src="dianshi1.webp">
  94.                             <span>Xiaomi 12S</span>
  95.                         </span>
  96.                         <span class="head3_div1_1_2s">
  97.                             <img src="dianshi2.webp">
  98.                             <span>Redmi 10A</span>
  99.                         </span>
  100.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  101.                             <span>Redmi X65 2022款</span>
  102.                         </span>
  103.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  104.                             <span>小米电视6至尊版 65英寸
  105.                             </span>
  106.                         </span>
  107.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  108.                             <span>iphone 13</span>
  109.                         </span>
  110.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  111.                             <span>小米电视6 65" OLED</span>
  112.                         </span>
  113.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  114.                             <span>小米电视5 75英寸</span>
  115.                         </span>
  116.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  117.                             <span>Xiaomi 12S</span>
  118.                         </span>
  119.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  120.                             <span>Redmi K50</span>
  121.                         </span>
  122.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  123.                             <span>Redmi智能电视X55 55英寸
  124.                             </span>
  125.                         </span>
  126.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  127.                             <span>小米电视ES43 2022款</span>
  128.                         </span>
  129.                         <span class="head3_div1_1_2s"><img src="shouji4.webp">
  130.                             <span>Xiaomi 12S</span>
  131.                         </span>
  132.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  133.                             <span>小米电视5 75英寸</span>
  134.                         </span>
  135.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  136.                             <span>小米电视5 75英寸</span>
  137.                         </span>
  138.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  139.                             <span>Xiaomi 12S</span>
  140.                         </span>
  141.                         <span class="head3_div1_1_2s"><img src="dianshi8.webp">
  142.                             <span>Redmi K40S</span>
  143.                         </span>
  144.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  145.                             <span>小米电视5 75英寸</span>
  146.                         </span>
  147.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  148.                             <span>Xiaomi 12S</span>
  149.                         </span>
  150.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  151.                             <span>Xiaomi 12S</span>
  152.                         </span>
  153.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  154.                             <span>黑鲨5</span>
  155.                         </span>
  156.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  157.                             <span>Xiaomi 12S</span>
  158.                         </span>
  159.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  160.                             <span>Note 11T Pro</span>
  161.                         </span>
  162.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  163.                             <span>小米电视ES43 2022款</span>
  164.                         </span>
  165.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  166.                             <span>小米电视ES43 2022款</span>
  167.                         </span>
  168.                     </div>
  169.                 </div>
  171.                 <div class="head3_div1_3">
  172.                     <span class="head3_div3_s">
  173.                         <span class="head3_div1_s1">笔记本 平板</span>
  174.                         <span class="head3_div1_s2"></span>
  175.                     </span>
  176.                     <div class="head3_div3_1_2">
  177.                         <span class="head3_div1_1_2s">
  178.                             <img src="dianshi1.webp">
  179.                             <span>Xiaomi 12S</span>
  180.                         </span>
  181.                         <span class="head3_div1_1_2s">
  182.                             <img src="dianshi2.webp">
  183.                             <span>Redmi 10A</span>
  184.                         </span>
  185.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  186.                             <span>Redmi X65 2022款</span>
  187.                         </span>
  188.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  189.                             <span>小米电视6至尊版 65英寸
  190.                             </span>
  191.                         </span>
  192.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  193.                             <span>iphone 13</span>
  194.                         </span>
  195.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  196.                             <span>小米电视6 65" OLED</span>
  197.                         </span>
  198.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  199.                             <span>小米电视5 75英寸</span>
  200.                         </span>
  201.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  202.                             <span>Xiaomi 12S</span>
  203.                         </span>
  204.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  205.                             <span>Redmi K50</span>
  206.                         </span>
  207.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  208.                             <span>Redmi智能电视X55 55英寸
  209.                             </span>
  210.                         </span>
  211.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  212.                             <span>小米电视ES43 2022款</span>
  213.                         </span>
  214.                         <span class="head3_div1_1_2s"><img src="shouji4.webp">
  215.                             <span>Xiaomi 12S</span>
  216.                         </span>
  217.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  218.                             <span>小米电视5 75英寸</span>
  219.                         </span>
  220.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  221.                             <span>小米电视5 75英寸</span>
  222.                         </span>
  223.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  224.                             <span>Xiaomi 12S</span>
  225.                         </span>
  226.                         <span class="head3_div1_1_2s"><img src="dianshi8.webp">
  227.                             <span>小米平板5Pro</span>
  228.                         </span>
  229.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  230.                             <span>小米电视5 75英寸</span>
  231.                         </span>
  232.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  233.                             <span>小米笔记本 Pro 14</span>
  234.                         </span>
  235.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  236.                             <span>Xiaomi 12S</span>
  237.                         </span>
  238.                         <span class="head3_div1_1_2s">
  239.                             <!-- <img src="shouji6.webp">
  240.                             <span>黑鲨5</span> -->
  241.                         </span>
  242.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  243.                             <span>Xiaomi 12S</span>
  244.                         </span>
  245.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  246.                             <span>Note 11T Pro</span>
  247.                         </span>
  248.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  249.                             <span>小米电视ES43 2022款</span>
  250.                         </span>
  252.                     </div>
  253.                 </div>
  255.                 <div class="head3_div1_4">
  256.                     <span class="head3_div4_s">
  257.                         <span class="head3_div1_s1">出行 穿戴</span>
  258.                         <span class="head3_div1_s2"></span>
  259.                     </span>
  260.                     <div class="head3_div4_1_2">
  261.                         <span class="head3_div1_1_2s">
  262.                             <img src="dianshi1.webp">
  263.                             <span>Xiaomi 12S</span>
  264.                         </span>
  265.                         <span class="head3_div1_1_2s">
  266.                             <img src="dianshi2.webp">
  267.                             <span>Redmi 10A</span>
  268.                         </span>
  269.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  270.                             <span>Redmi X65 2022款</span>
  271.                         </span>
  272.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  273.                             <span>小米电视6至尊版 65英寸
  274.                             </span>
  275.                         </span>
  276.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  277.                             <span>iphone 13</span>
  278.                         </span>
  279.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  280.                             <span>小米电视6 65" OLED</span>
  281.                         </span>
  282.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  283.                             <span>小米电视5 75英寸</span>
  284.                         </span>
  285.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  286.                             <span>Xiaomi 12S</span>
  287.                         </span>
  288.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  289.                             <span>Redmi K50</span>
  290.                         </span>
  291.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  292.                             <span>Redmi智能电视X55 55英寸
  293.                             </span>
  294.                         </span>
  295.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  296.                             <span>小米电视ES43 2022款</span>
  297.                         </span>
  298.                         <span class="head3_div1_1_2s">
  299.                             <!-- <img src="shouji4.webp">
  300.                             <span>Xiaomi 12S</span> -->
  301.                         </span>
  302.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  303.                             <span>小米电视5 75英寸</span>
  304.                         </span>
  305.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  306.                             <span>小米电视5 75英寸</span>
  307.                         </span>
  308.                         <span class="head3_div1_1_2s">
  309.                             <!-- <img src="shouji5.webp">
  310.                             <span>Xiaomi 12S</span> -->
  311.                         </span>
  312.                         <span class="head3_div1_1_2s"><img src="dianshi8.webp">
  313.                             <span>Redmi K40S</span>
  314.                         </span>
  315.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  316.                             <span>小米电视5 75英寸</span>
  317.                         </span>
  319.                     </div>
  320.                 </div>
  322.                 <div class="head3_div1_5">
  323.                     <span class="head3_div5_s">
  324.                         <span class="head3_div1_s1">耳机 音箱</span>
  325.                         <span class="head3_div1_s2"></span>
  326.                     </span>
  327.                     <div class="head3_div5_1_2">
  328.                         <span class="head3_div1_1_2s">
  329.                             <img src="dianshi1.webp">
  330.                             <span>Xiaomi 12S</span>
  331.                         </span>
  332.                         <span class="head3_div1_1_2s">
  333.                             <img src="dianshi2.webp">
  334.                             <span>Redmi 10A</span>
  335.                         </span>
  336.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  337.                             <span>Redmi X65 2022款</span>
  338.                         </span>
  339.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  340.                             <span>小米电视6至尊版 65英寸
  341.                             </span>
  342.                         </span>
  343.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  344.                             <span>iphone 13</span>
  345.                         </span>
  346.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  347.                             <span>小米电视6 65" OLED</span>
  348.                         </span>
  349.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  350.                             <span>小米电视5 75英寸</span>
  351.                         </span>
  352.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  353.                             <span>Xiaomi 12S</span>
  354.                         </span>
  355.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  356.                             <span>Redmi K50</span>
  357.                         </span>
  358.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  359.                             <span>Redmi智能电视X55 55英寸
  360.                             </span>
  361.                         </span>
  362.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  363.                             <span>小米电视ES43 2022款</span>
  364.                         </span>
  365.                         <span class="head3_div1_1_2s">
  366.                             <!-- <img src="shouji4.webp">
  367.                             <span>Xiaomi 12S</span> -->
  368.                         </span>
  369.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  370.                             <span>小米电视5 75英寸</span>
  371.                         </span>
  372.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  373.                             <span>小米电视5 75英寸</span>
  374.                         </span>
  375.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  376.                             <span>Xiaomi 12S</span>
  377.                         </span>
  378.                         <span class="head3_div1_1_2s">
  379.                             <!-- <img src="dianshi8.webp">
  380.                             <span>Redmi K40S</span> -->
  381.                         </span>
  382.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  383.                             <span>小米电视5 75英寸</span>
  384.                         </span>
  385.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  386.                             <span>Xiaomi 12S</span>
  387.                         </span>
  388.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  389.                             <span>Xiaomi 12S</span>
  390.                         </span>
  391.                         <span class="head3_div1_1_2s">
  392.                             <!-- <img src="shouji6.webp">
  393.                             <span>黑鲨5</span> -->
  394.                         </span>
  395.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  396.                             <span>Xiaomi 12S</span>
  397.                         </span>
  398.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  399.                             <span>Note 11T Pro</span>
  400.                         </span>
  401.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  402.                             <span>小米电视ES43 2022款</span>
  403.                         </span>
  404.                         <!-- <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  405.                             <span>小米电视ES43 2022款</span>
  406.                         </span> -->
  407.                     </div>
  408.                 </div>
  410.                 <div class="head3_div1_6">
  411.                     <span class="head3_div6_s">
  412.                         <span class="head3_div1_s1">家电</span>
  413.                         <span class="head3_div1_s2"></span>
  414.                     </span>
  415.                     <div class="head3_div6_1_2">
  416.                         <span class="head3_div1_1_2s">
  417.                             <img src="dianshi1.webp">
  418.                             <span>Xiaomi 12S</span>
  419.                         </span>
  420.                         <span class="head3_div1_1_2s">
  421.                             <img src="dianshi2.webp">
  422.                             <span>Redmi 10A</span>
  423.                         </span>
  424.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  425.                             <span>Redmi X65 2022款</span>
  426.                         </span>
  427.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  428.                             <span>小米电视6至尊版 65英寸
  429.                             </span>
  430.                         </span>
  431.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  432.                             <span>iphone 13</span>
  433.                         </span>
  434.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  435.                             <span>小米电视6 65" OLED</span>
  436.                         </span>
  437.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  438.                             <span>小米电视5 75英寸</span>
  439.                         </span>
  440.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  441.                             <span>Xiaomi 12S</span>
  442.                         </span>
  443.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  444.                             <span>Redmi K50</span>
  445.                         </span>
  446.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  447.                             <span>Redmi智能电视X55 55英寸
  448.                             </span>
  449.                         </span>
  450.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  451.                             <span>小米电视ES43 2022款</span>
  452.                         </span>
  453.                         <span class="head3_div1_1_2s"><img src="shouji4.webp">
  454.                             <span>Xiaomi 12S</span>
  455.                         </span>
  456.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  457.                             <span>小米电视5 75英寸</span>
  458.                         </span>
  459.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  460.                             <span>小米电视5 75英寸</span>
  461.                         </span>
  462.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  463.                             <span>Xiaomi 12S</span>
  464.                         </span>
  465.                         <span class="head3_div1_1_2s"><img src="dianshi8.webp">
  466.                             <span>Redmi K40S</span>
  467.                         </span>
  468.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  469.                             <span>小米电视5 75英寸</span>
  470.                         </span>
  471.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  472.                             <span>Xiaomi 12S</span>
  473.                         </span>
  474.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  475.                             <span>Xiaomi 12S</span>
  476.                         </span>
  477.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  478.                             <span>黑鲨5</span>
  479.                         </span>
  480.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  481.                             <span>Xiaomi 12S</span>
  482.                         </span>
  483.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  484.                             <span>Note 11T Pro</span>
  485.                         </span>
  486.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  487.                             <span>小米电视ES43 2022款</span>
  488.                         </span>
  489.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  490.                             <span>小米电视ES43 2022款</span>
  491.                         </span>
  492.                     </div>
  493.                 </div>
  495.                 <div class="head3_div1_7">
  496.                     <span class="head3_div7_s">
  497.                         <span class="head3_div1_s1">智能 路由器</span>
  498.                         <span class="head3_div1_s2"></span>
  499.                     </span>
  500.                     <div class="head3_div7_1_2">
  501.                         <span class="head3_div1_1_2s">
  502.                             <img src="dianshi1.webp">
  503.                             <span>Xiaomi 12S</span>
  504.                         </span>
  505.                         <span class="head3_div1_1_2s">
  506.                             <img src="dianshi2.webp">
  507.                             <span>Redmi 10A</span>
  508.                         </span>
  509.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  510.                             <span>Redmi X65 2022款</span>
  511.                         </span>
  512.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  513.                             <span>小米电视6至尊版 65英寸
  514.                             </span>
  515.                         </span>
  516.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  517.                             <span>iphone 13</span>
  518.                         </span>
  519.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  520.                             <span>小米电视6 65" OLED</span>
  521.                         </span>
  522.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  523.                             <span>小米电视5 75英寸</span>
  524.                         </span>
  525.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  526.                             <span>Xiaomi 12S</span>
  527.                         </span>
  528.                         <span class="head3_div1_1_2s">
  529.                             <!-- <img src="dianshi1.webp">
  530.                             <span>Redmi K50</span> -->
  531.                         </span>
  532.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  533.                             <span>Redmi智能电视X55 55英寸
  534.                             </span>
  535.                         </span>
  536.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  537.                             <span>小米电视ES43 2022款</span>
  538.                         </span>
  539.                         <span class="head3_div1_1_2s">
  540.                             <!-- <img src="shouji4.webp">
  541.                             <span>Xiaomi 12S</span> -->
  542.                         </span>
  543.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  544.                             <span>小米电视5 75英寸</span>
  545.                         </span>
  546.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  547.                             <span>小米电视5 75英寸</span>
  548.                         </span>
  549.                         <span class="head3_div1_1_2s">
  550.                             <!-- <img src="shouji5.webp">
  551.                             <span>Xiaomi 12S</span> -->
  552.                         </span>
  553.                         <span class="head3_div1_1_2s"><img src="dianshi8.webp">
  554.                             <span>Redmi K40S</span>
  555.                         </span>
  556.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  557.                             <span>小米电视5 75英寸</span>
  558.                         </span>
  560.                     </div>
  561.                 </div>
  563.                 <div class="head3_div1_8">
  564.                     <span class="head3_div8_s">
  565.                         <span class="head3_div1_s1">电源 配件</span>
  566.                         <span class="head3_div1_s2"></span>
  567.                     </span>
  568.                     <div class="head3_div8_1_2">
  569.                         <span class="head3_div1_1_2s">
  570.                             <img src="dianshi1.webp">
  571.                             <span>Xiaomi 12S</span>
  572.                         </span>
  573.                         <span class="head3_div1_1_2s">
  574.                             <img src="dianshi2.webp">
  575.                             <span>Redmi 10A</span>
  576.                         </span>
  577.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  578.                             <span>Redmi X65 2022款</span>
  579.                         </span>
  580.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  581.                             <span>小米电视6至尊版 65英寸
  582.                             </span>
  583.                         </span>
  584.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  585.                             <span>iphone 13</span>
  586.                         </span>
  587.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  588.                             <span>小米电视6 65" OLED</span>
  589.                         </span>
  590.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  591.                             <span>小米电视5 75英寸</span>
  592.                         </span>
  593.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  594.                             <span>Xiaomi 12S</span>
  595.                         </span>
  596.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  597.                             <span>Redmi K50</span>
  598.                         </span>
  599.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  600.                             <span>Redmi智能电视X55 55英寸
  601.                             </span>
  602.                         </span>
  603.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  604.                             <span>小米电视ES43 2022款</span>
  605.                         </span>
  607.                     </div>
  608.                 </div>
  610.                 <div class="head3_div1_9">
  611.                     <span class="head3_div9_s">
  612.                         <span class="head3_div1_s1">健康 儿童</span>
  613.                         <span class="head3_div1_s2"></span>
  614.                     </span>
  615.                     <div class="head3_div9_1_2">
  616.                         <span class="head3_div1_1_2s">
  617.                             <img src="dianshi1.webp">
  618.                             <span>Xiaomi 12S</span>
  619.                         </span>
  620.                         <span class="head3_div1_1_2s">
  621.                             <img src="dianshi2.webp">
  622.                             <span>Redmi 10A</span>
  623.                         </span>
  624.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  625.                             <span>Redmi X65 2022款</span>
  626.                         </span>
  627.                         <span class="head3_div1_1_2s"><img src="dianshi2.webp">
  628.                             <span>小米电视6至尊版 65英寸
  629.                             </span>
  630.                         </span>
  631.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  632.                             <span>iphone 13</span>
  633.                         </span>
  634.                         <span class="head3_div1_1_2s"><img src="dianshi5.webp">
  635.                             <span>小米电视6 65" OLED</span>
  636.                         </span>
  637.                         <span class="head3_div1_1_2s"><img src="bijiben4.webp">
  638.                             <span>小米电视5 75英寸</span>
  639.                         </span>
  640.                         <span class="head3_div1_1_2s"><img src="shouji2.webp">
  641.                             <span>Xiaomi 12S</span>
  642.                         </span>
  643.                         <span class="head3_div1_1_2s"><img src="dianshi1.webp">
  644.                             <span>Redmi K50</span>
  645.                         </span>
  646.                         <span class="head3_div1_1_2s"><img src="shouji3.webp">
  647.                             <span>Redmi智能电视X55 55英寸
  648.                             </span>
  649.                         </span>
  650.                         <span class="head3_div1_1_2s"><img src="shouji5.webp">
  651.                             <span>小米电视ES43 2022款</span>
  652.                         </span>
  653.                         <span class="head3_div1_1_2s"><img src="shouji4.webp">
  654.                             <span>Xiaomi 12S</span>
  655.                         </span>
  656.                         <span class="head3_div1_1_2s"><img src="dianshi7.webp">
  657.                             <span>小米电视5 75英寸</span>
  658.                         </span>
  659.                         <span class="head3_div1_1_2s"><img src="shouji6.webp">
  660.                             <span>小米电视5 75英寸</span>
  661.                         </span>
  662.                         <span class="head3_div1_1_2s">
  663.                             <!-- <img src="shouji5.webp">
  664.                             <span>Xiaomi 12S</span> -->
  665.                         </span>
  666.                         <span class="head3_div1_1_2s"><img src="dianshi8.webp">
  667.                             <span>Redmi K40S</span>
  668.                         </span>
  669.                         <span class="head3_div1_1_2s"><img src="shouji1.webp">
  670.                             <span>小米电视5 75英寸</span>
  671.                         </span>
  673.                     </div>
  674.                 </div>
  675.                 <!--<div class="head3_div1_1"><span class="head3_div1_s"></span></div> -->
  676.             </div>
  678.         </div>
  1. // CSS 部分
  2.  .head3_div1 {
  3.          width: 234px;
  4.          height: 400px;
  5.          /* padding-top: 20px; */
  6.          /* padding-bottom: 20px; */
  7.          /* background-color: #7d7389; */
  8.          background-color: rgba(105, 101, 101, .6);
  9.          position: absolute;
  10.          /* top: -40px; */
  11.          top: 154px;
  12.      }
  14.      .head3_div1_1 {
  15.          width: 234px;
  16.          height: 62px;
  17.          color: #ffffff;
  18.          position: absolute;
  19.          float: left;
  20.      }
  21.      .head3_div1_s {
  23.          width: 234px;
  24.          height: 42px;
  25.          /* padding-left: 30px; */
  26.          float: left;
  27.          margin-top: 20px;
  28.      }
  29.      .head3_div1_s1 {
  30.          margin-left: 40px;
  31.          float: left;
  32.          position: absolute;
  33.          top: 28px;
  34.      }
  35.      .head3_div1_s2 {
  36.          background-image: url(you.png);
  37.          width: 16px;
  38.          height: 16px;
  39.          background-repeat: no-repeat;
  40.          position: absolute;
  41.          right: 20px;
  42.          top: 30px;
  43.      }
  44.      .head3_div1_s:hover {
  45.          background-color: #ff6700;
  46.      }
  47.      .head3_div1_1_2 {
  48.          width: 992px;
  49.          height: 400px;
  50.          /* background-color: red; */
  51.          background-color: #ffffff;
  52.          /* position: relative; */
  53.          position: absolute;
  54.          right: -993px;
  55.          /* top: -120px; */
  56.          display: -webkit-flex;
  57.          display: flex;
  58.          -webkit-flex-wrap: wrap;
  59.          align-content: flex-start;
  60.          /* flex-grow: 1; */
  61.          display: none;
  63.      }
  64.      .head3_div1_1_2s {
  65.          /* display: inline-block; */
  66.          width: 247px;
  67.          height: 65px;
  68.          /* background-color: aqua; */
  69.          float: left;
  70.          /* margin: 10px; */
  71.      }
  72.      .head3_div1_1_2s img {
  73.          margin-left: 20px;
  74.          height: 60px;
  75.          width: 45px;
  76.      }
  77.      .head3_div1_1_2s span {
  78.          color: #3e3e3e;
  79.          position: relative;
  80.          top: -28px;
  81.          font-size: 14px;
  82.      }
  83.      .head3_div1_1_2s span:hover {
  84.          color: #ff6700;
  85.          cursor: pointer;
  86.      }
  87.      .head3_div1_1:hover .head3_div1_1_2 {
  88.          display: block;
  89.      }
  90.      .head3_div1_2 {
  91.          width: 234px;
  92.          height: 42px;
  93.          /* float: left; */
  94.          position: absolute;
  95.          top: 62px;
  96.          color: #ffffff;
  97.      }
  98.      .head3_div2_s {
  99.          width: 234px;
  100.          height: 42px;
  101.          /* padding-left: 30px; */
  102.          float: left;
  103.          /* margin-top: 20px; */
  104.      }
  105.      .head3_div2_s>span {
  106.          position: absolute;
  107.          top: 10px;
  108.      }
  109.      .head3_div2_s:hover {
  110.          background-color: #ff6700;
  111.      }
  112.      .head3_div2_1_2 {
  113.          width: 992px;
  114.          height: 400px;
  115.          /* background-color: red; */
  116.          background-color: #ffffff;
  117.          /* position: relative; */
  118.          position: absolute;
  119.          right: -993px;
  120.          top: -62px;
  121.          /* top: -120px; */
  122.          display: -webkit-flex;
  123.          display: flex;
  124.          -webkit-flex-wrap: wrap;
  125.          align-content: flex-start;
  126.          /* flex-grow: 1; */
  127.          display: none;
  128.      }
  129.      .head3_div1_2:hover .head3_div2_1_2 {
  130.          display: block;
  131.      }
  132.      .head3_div1_3 {
  133.          width: 234px;
  134.          height: 42px;
  135.          /* float: left; */
  136.          position: absolute;
  137.          top: 104px;
  138.          color: #ffffff;
  139.      }
  140.      .head3_div3_s {
  141.          width: 234px;
  142.          height: 42px;
  143.          /* padding-left: 30px; */
  144.          float: left;
  145.          /* margin-top: 20px; */
  146.      }
  147.      .head3_div3_s>span {
  148.          position: absolute;
  149.          top: 10px;
  150.      }
  151.      .head3_div3_s:hover {
  152.          background-color: #ff6700;
  153.      }
  154.      .head3_div3_1_2 {
  155.          width: 992px;
  156.          height: 400px;
  157.          /* background-color: red; */
  158.          background-color: #ffffff;
  159.          /* position: relative; */
  160.          position: absolute;
  161.          right: -993px;
  162.          top: -104px;
  163.          /* top: -120px; */
  164.          display: -webkit-flex;
  165.          display: flex;
  166.          -webkit-flex-wrap: wrap;
  167.          align-content: flex-start;
  168.          /* flex-grow: 1; */
  169.          display: none;
  170.      }
  171.      .head3_div1_3:hover .head3_div3_1_2 {
  172.          display: block;
  173.      }
  174.      .head3_div1_4 {
  175.          width: 234px;
  176.          height: 42px;
  177.          /* float: left; */
  178.          position: absolute;
  179.          top: 146px;
  180.          color: #ffffff;
  181.      }
  182.      .head3_div4_s {
  183.          width: 234px;
  184.          height: 42px;
  185.          /* padding-left: 30px; */
  186.          float: left;
  187.          /* margin-top: 20px; */
  188.      }
  189.      .head3_div4_s>span {
  190.          position: absolute;
  191.          top: 10px;
  192.      }
  193.      .head3_div4_s:hover {
  194.          background-color: #ff6700;
  195.      }
  196.      .head3_div4_1_2 {
  197.          width: 741px;
  198.          height: 400px;
  199.          /* background-color: red; */
  200.          background-color: #ffffff;
  201.          /* position: relative; */
  202.          position: absolute;
  203.          right: -742px;
  204.          top: -146px;
  205.          /* top: -120px; */
  206.          display: -webkit-flex;
  207.          display: flex;
  208.          -webkit-flex-wrap: wrap;
  209.          align-content: flex-start;
  210.          /* flex-grow: 1; */
  211.          display: none;
  212.      }
  213.      .head3_div1_4:hover .head3_div4_1_2 {
  214.          display: block;
  215.      }
  216.      .head3_div1_5 {
  217.          width: 234px;
  218.          height: 42px;
  219.          /* float: left; */
  220.          position: absolute;
  221.          top: 188px;
  222.          color: #ffffff;
  223.      }
  224.      .head3_div5_s {
  225.          width: 234px;
  226.          height: 42px;
  227.          /* padding-left: 30px; */
  228.          float: left;
  229.          /* margin-top: 20px; */
  230.      }
  231.      .head3_div5_s>span {
  232.          position: absolute;
  233.          top: 10px;
  234.      }
  235.      .head3_div5_s:hover {
  236.          background-color: #ff6700;
  237.      }
  238.      .head3_div5_1_2 {
  239.          width: 992px;
  240.          height: 400px;
  241.          /* background-color: red; */
  242.          background-color: #ffffff;
  243.          /* position: relative; */
  244.          position: absolute;
  245.          right: -993px;
  246.          top: -188px;
  247.          /* top: -120px; */
  248.          display: -webkit-flex;
  249.          display: flex;
  250.          -webkit-flex-wrap: wrap;
  251.          align-content: flex-start;
  252.          /* flex-grow: 1; */
  253.          display: none;
  254.      }
  255.      .head3_div1_5:hover .head3_div5_1_2 {
  256.          display: block;
  257.      }
  258.    .head3_div1_6 {
  259.          width: 234px;
  260.          height: 42px;
  261.          /* float: left; */
  262.          position: absolute;
  263.          top: 230px;
  264.          color: #ffffff;
  265.      }
  267.      .head3_div6_s {
  269.          width: 234px;
  270.          height: 42px;
  271.          /* padding-left: 30px; */
  272.          float: left;
  273.          /* margin-top: 20px; */
  274.      }
  275.      .head3_div6_s>span {
  276.          position: absolute;
  277.          top: 10px;
  278.      }
  279.      .head3_div6_s:hover {
  280.          background-color: #ff6700;
  281.      }
  282.      .head3_div6_1_2 {
  283.          width: 992px;
  284.          height: 400px;
  285.          /* background-color: red; */
  286.          background-color: #ffffff;
  287.          /* position: relative; */
  288.          position: absolute;
  289.          right: -993px;
  290.          top: -230px;
  291.          /* top: -120px; */
  292.          display: -webkit-flex;
  293.          display: flex;
  294.          -webkit-flex-wrap: wrap;
  295.          align-content: flex-start;
  296.          /* flex-grow: 1; */
  297.          display: none;
  298.      }
  299.      .head3_div1_6:hover .head3_div6_1_2 {
  300.          display: block;
  301.      }
  302.   .head3_div1_7 {
  303.          width: 234px;
  304.          height: 42px;
  305.          /* float: left; */
  306.          position: absolute;
  307.          top: 272px;
  308.          color: #ffffff;
  309.      }
  310.      .head3_div7_s {
  311.          width: 234px;
  312.          height: 42px;
  313.          /* padding-left: 30px; */
  314.          float: left;
  315.          /* margin-top: 20px; */
  316.      }
  317.      .head3_div7_s>span {
  318.          position: absolute;
  319.          top: 10px;
  320.      }
  321.      .head3_div7_s:hover {
  322.          background-color: #ff6700;
  323.      }
  324.      .head3_div7_1_2 {
  325.          width: 741px;
  326.          height: 400px;
  327.          /* background-color: red; */
  328.          background-color: #ffffff;
  329.          /* position: relative; */
  330.          position: absolute;
  331.          right: -742px;
  332.          top: -272px;
  333.          /* top: -120px; */
  334.          display: -webkit-flex;
  335.          display: flex;
  336.          -webkit-flex-wrap: wrap;
  337.          align-content: flex-start;
  338.          /* flex-grow: 1; */
  339.          display: none;
  340.      }
  341.      .head3_div1_7:hover .head3_div7_1_2 {
  342.          display: block;
  343.      }
  344.   .head3_div1_8 {
  345.          width: 234px;
  346.          height: 42px;
  347.          /* float: left; */
  348.          position: absolute;
  349.          top: 314px;
  350.          color: #ffffff;
  351.      }
  352.      .head3_div8_s {
  354.          width: 234px;
  355.          height: 42px;
  356.          /* padding-left: 30px; */
  357.          float: left;
  358.          /* margin-top: 20px; */
  359.      }
  360.      .head3_div8_s>span {
  361.          position: absolute;
  362.          top: 10px;
  363.      }
  364.      .head3_div8_s:hover {
  365.          background-color: #ff6700;
  366.      }
  367.      .head3_div8_1_2 {
  368.          width: 498px;
  369.          height: 400px;
  370.          /* background-color: red; */
  371.          background-color: #ffffff;
  372.          /* position: relative; */
  373.          position: absolute;
  374.          right: -499px;
  375.          top: -314px;
  376.          /* top: -120px; */
  377.          display: -webkit-flex;
  378.          display: flex;
  379.          -webkit-flex-wrap: wrap;
  380.          align-content: flex-start;
  381.          /* flex-grow: 1; */
  382.          display: none;
  383.      }
  384.      .head3_div1_8:hover .head3_div8_1_2 {
  385.          display: block;
  386.      }
  387.      .head3_div1_9 {
  388.          width: 234px;
  389.          height: 42px;
  390.          /* float: left; */
  391.          position: absolute;
  392.          top: 356px;
  393.          color: #ffffff;
  394.      }
  395.      .head3_div9_s {
  396.          width: 234px;
  397.          height: 42px;
  398.          /* padding-left: 30px; */
  399.          float: left;
  400.          /* margin-top: 20px; */
  401.      }
  402.      .head3_div9_s>span {
  403.          position: absolute;
  404.          top: 10px;
  405.      }
  406.      .head3_div9_s:hover {
  407.          background-color: #ff6700;
  408.      }
  409.      .head3_div9_1_2 {
  410.          width: 741px;
  411.          height: 400px;
  412.          /* background-color: red; */
  413.          background-color: #ffffff;
  414.          /* position: relative; */
  415.          position: absolute;
  416.          right: -742px;
  417.          top: -356px;
  418.          /* top: -120px; */
  419.          display: -webkit-flex;
  420.          display: flex;
  421.          -webkit-flex-wrap: wrap;
  422.          align-content: flex-start;
  423.          /* flex-grow: 1; */
  424.          display: none;
  425.      }
  426.      .head3_div1_9:hover .head3_div9_1_2 {
  427.          display: block;
  428.      }
  429.      .head3_div1_10 {
  430.          width: 234px;
  431.          height: 42px;
  432.      }

四 、总结收获

  1. 毕竟第一次做，代码写的可能比较乱，命名可能也不是太规范，以后多加改正。
  2. 基本还原了原网页，并且只用到了CSS3和HTML5。

五 、完整版源码+图片素材

链接：https://pan.baidu.com/s/1538stsXWaPShaW6OGJM4Wg?pwd=0720
提取码：0720

大家有任何问题 都可以在评论区指出，谢谢哟！

标签： css3 html5 前端
本文转载自: https://blog.csdn.net/m0_63512120/article/details/125885820
版权归原作者 壹个人的火锅 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML5+CSS3实现小米商城 （完整版）”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？