devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

8.11 Web前端-小米商城项目实战

作者：不正经 | 2024-04-02 19:46:12

赞

踩

小米商城项目实战

hello大家上午好，今天继续来说我的小米商城的项目，上次说道了头部如何书写，里面有个比较重要的就是下拉栏和白色小三角书写，今天来给大家说一下中间上半部分内容的书写，主要部分如下图所示：

首先我们需要确定结构的划分，这一点我在每篇项目中都强调过，这一点也是非常重要的一点：

可以看到主要分为上下两个盒子，其中下半部分很好写，四个小盒子用a链接书写内容即可，上班部分是一个难点，首先是占满了整个盒子的轮播图，在这里我用到的是名为swiper的插件，他可以帮我们很方便的解决轮播图的问题，但是另一个问题接踵而至，那就是轮播图占满了整个界面盒子，左侧的商品栏如何显示？用浮动不行，浮动不会重叠元素，所以，在这里我们就要用到一个定位，把商品栏这个盒子设置一个绝对定位，给其父元素一个相对定位，把top值和left值都设为0就可以了，这样设置完之后，会看到如下图所示的样子：

奇怪，商品栏跑哪里去了？为什么定位了没有显示？

还记得在之前我和大家说过吗，css又叫层叠样式表，既然叫层叠样式，所以从3D视角来，我们设置的这些元素都是一层一层的，于是导致了上面的轮播图盖住了商品栏，在这里我们给商品栏的盒子设置一个层级优先度就好了，优先度越高的层级越会在上面显示，用z-index来设置层级优先度，我们设置一个90就会让它显示在轮播图上方：

运行结果就会正常：

最后就是大量的侧边栏拉出，这个和上一篇的内容一样，运用的是定位以及移入显示，在这里就不过多赘述了。

下半部分的盒子，后面三个用a标签包裹图片即可，第一个小盒子内部需要用的知识点有点多：

这里先用到ul列表将六个内容用li包裹写入，注意这里的图要用到的是阿里矢量图，然后给li整体浮动后调整每个元素的位置，保证他们上下左右居中对齐，然后用css书写伪类，将每个元素用分隔线划分开，直接用css书写即可，这个在我之前的文章里也说过，需要了解的小伙伴可以看看我之前的文章。

除了上面的内容，侧边栏的书写就更容易了，就是一个ul列表下去把每个元素书写在内部，然后就是用position:fixed来定位，这个是可以相对于浏览器窗口定位的方法，调整top值和left值就可以让其固定在想要的位置。

上方内容区和侧边栏html代码：

  1. <container>
  2.       <div class="cbbox">
  3.         <div class="cmbox1">
  4.           <div class="swiper">
  5.             <div class="swiper-wrapper">
  6.               <div class="swiper-slide">
  7.                 <img src="./图片素材/轮播图1.jpg" alt="" />
  8.               </div>
  9.               <div class="swiper-slide">
  10.                 <img src="./图片素材/轮播图2.webp" alt="" />
  11.               </div>
  12.               <div class="swiper-slide">
  13.                 <img src="./图片素材/轮播图3.webp" alt="" />
  14.               </div>
  15.               <div class="swiper-slide">
  16.                 <img src="./图片素材/轮播图4.webp" alt="" />
  17.               </div>
  18.             </div>
  19.             <div class="swiper-button-prev prev"></div>
  20.             <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
  21.             <div class="swiper-button-next"></div>
  22.             <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
  23.             <div class="swiper-pagination" style="margin-left: 45%;"></div>
  24.             <!--分页器。如果放置在swiper外面，需要自定义样式。-->
  25.           </div>
  26.           <div class="csbox1">
  27.             <ul>
  28.               <li class="csli">
  29.                 <a href="#">手机<span id="csspan">></span></a>
  30.                 <div class="cssbox">
  31.                   <ul>
  32.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  33.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  34.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  35.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  36.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  37.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  38.                   </ul>
  39.                   <ul>
  40.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  41.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  42.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  43.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  44.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  45.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  46.                   </ul>
  47.                   <ul>
  48.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  49.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  50.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  51.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  52.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  53.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  54.                   </ul>
  55.                   <ul>
  56.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  57.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  58.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  59.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  60.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  61.                     <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  62.                   </ul>
  63.                 </div>
  64.               </li>
  65.               <li class="csli">
  66.                 <a href="#">电视<span id="csspan">></span></a>
  67.                 <div class="cssbox">
  68.                   <ul>
  69.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  70.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  71.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  72.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  73.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  74.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  75.                   </ul>
  76.                   <ul>
  77.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  78.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  79.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  80.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  81.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  82.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  83.                   </ul>
  84.                   <ul>
  85.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  86.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  87.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  88.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  89.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  90.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  91.                   </ul>
  92.                   <ul>
  93.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  94.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  95.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  96.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  97.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  98.                     <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  99.                   </ul>
  100.                 </div>
  101.               </li>
  102.               <li class="csli">
  103.                 <a href="#">笔记本 平板<span id="csspan">></span></a>
  104.                 <div class="cssbox">
  105.                   <ul>
  106.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  107.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  108.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  109.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  110.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  111.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  112.                   </ul>
  113.                   <ul>
  114.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  115.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  116.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  117.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  118.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  119.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  120.                   </ul>
  121.                   <ul>
  122.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  123.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  124.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  125.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  126.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  127.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  128.                   </ul>
  129.                   <ul>
  130.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  131.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  132.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  133.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  134.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  135.                     <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  136.                   </ul>
  137.                 </div>
  138.               </li>
  139.               <li class="csli">
  140.                 <a href="#">出行 穿戴<span id="csspan">></span></a>
  141.                 <div class="cssbox">
  142.                   <ul>
  143.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  144.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  145.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  146.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  147.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  148.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  149.                   </ul>
  150.                   <ul>
  151.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  152.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  153.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  154.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  155.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  156.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  157.                   </ul>
  158.                   <ul>
  159.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  160.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  161.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  162.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  163.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  164.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  165.                   </ul>
  166.                   <ul>
  167.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  168.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  169.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  170.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  171.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  172.                     <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  173.                   </ul>
  174.                 </div>
  175.               </li>
  176.               <li class="csli">
  177.                 <a href="#">耳机 音箱<span id="csspan">></span></a>
  178.                 <div class="cssbox">
  179.                   <ul>
  180.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  181.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  182.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  183.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  184.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  185.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  186.                   </ul>
  187.                   <ul>
  188.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  189.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  190.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  191.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  192.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  193.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  194.                   </ul>
  195.                   <ul>
  196.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  197.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  198.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  199.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  200.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  201.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  202.                   </ul>
  203.                   <ul>
  204.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  205.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  206.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  207.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  208.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  209.                     <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  210.                   </ul>
  211.                 </div>
  212.               </li>
  213.               <li class="csli">
  214.                 <a href="#">家电<span id="csspan">></span></a>
  215.                 <div class="cssbox">
  216.                   <ul>
  217.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  218.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  219.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  220.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  221.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  222.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  223.                   </ul>
  224.                   <ul>
  225.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  226.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  227.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  228.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  229.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  230.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  231.                   </ul>
  232.                   <ul>
  233.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  234.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  235.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  236.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  237.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  238.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  239.                   </ul>
  240.                   <ul>
  241.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  242.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  243.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  244.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  245.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  246.                     <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
  247.                   </ul>
  248.                 </div>
  249.               </li>
  250.               <li class="csli">
  251.                 <a href="#">智能 路由器<span id="csspan">></span></a>
  252.                 <div class="cssbox">
  253.                   <ul>
  254.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  255.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  256.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  257.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  258.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  259.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  260.                   </ul>
  261.                   <ul>
  262.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  263.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  264.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  265.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  266.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  267.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  268.                   </ul>
  269.                   <ul>
  270.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  271.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  272.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  273.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  274.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  275.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  276.                   </ul>
  277.                   <ul>
  278.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  279.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  280.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  281.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  282.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  283.                     <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  284.                   </ul>
  285.                 </div>
  286.               </li>
  287.               <li class="csli">
  288.                 <a href="#">电源 配件<span id="csspan">></span></a>
  289.                 <div class="cssbox">
  290.                   <ul>
  291.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  292.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  293.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  294.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  295.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  296.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  297.                   </ul>
  298.                   <ul>
  299.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  300.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  301.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  302.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  303.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  304.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  305.                   </ul>
  306.                   <ul>
  307.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  308.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  309.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  310.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  311.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  312.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  313.                   </ul>
  314.                   <ul>
  315.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  316.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  317.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  318.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  319.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  320.                     <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
  321.                   </ul>
  322.                 </div>
  323.               </li>
  324.               <li class="csli">
  325.                 <a href="#">健康 儿童<span id="csspan">></span></a>
  326.                 <div class="cssbox">
  327.                   <ul>
  328.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  329.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  330.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  331.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  332.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  333.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  334.                   </ul>
  335.                   <ul>
  336.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  337.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  338.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  339.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  340.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  341.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  342.                   </ul>
  343.                   <ul>
  344.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  345.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  346.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  347.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  348.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  349.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  350.                   </ul>
  351.                   <ul>
  352.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  353.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  354.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  355.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  356.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  357.                     <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
  358.                   </ul>
  359.                 </div>
  360.               </li>
  361.               <li class="csli">
  362.                 <a href="#">生活 箱包<span id="csspan">></span></a>
  363.                 <div class="cssbox">
  364.                   <ul>
  365.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  366.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  367.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  368.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  369.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  370.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  371.                   </ul>
  372.                   <ul>
  373.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  374.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  375.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  376.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  377.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  378.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  379.                   </ul>
  380.                   <ul>
  381.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  382.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  383.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  384.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  385.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  386.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  387.                   </ul>
  388.                   <ul>
  389.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  390.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  391.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  392.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  393.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  394.                     <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
  395.                   </ul>
  396.                 </div>
  397.               </li>
  398.             </ul>
  399.           </div>
  400.         </div>
  401.         <div class="cmbox2">
  402.           <div class="csbox2">
  403.             <ul>
  404.               <li>
  405.                 <a href="#"><i class="iconfont">&#xe60d;</i><span>保障服务</span></a>
  406.               </li>
  407.               <li>
  408.                 <a href="#"><i class="iconfont">&#xe60f;</i><span>企业团购</span></a>
  409.               </li>
  410.               <li>
  411.                 <a href="#"><i class="iconfont">&#xe731;</i><span>F码通道</span></a>
  412.               </li>
  413.               <li>
  414.                 <a href="#"><i class="iconfont">&#xe894;</i><span>米粉卡</span></a>
  415.               </li>
  416.               <li>
  417.                 <a href="#"><i class="iconfont">&#xe65c;</i><span>以旧换新</span></a>
  418.               </li>
  419.               <li>
  420.                 <a href="#"><i class="iconfont">&#xe6c8;</i><span>话费服务</span></a>
  421.             </ul>
  422.           </div>
  423.           <div class="csbox3">
  424.             <ul>
  425.               <li><a href="#"><img src="./图片素材/1.jpg" alt="1"></a></li>
  426.               <li><a href="#"><img src="./图片素材/2.jpg" alt="1"></a></li>
  427.               <li><a href="#"><img src="./图片素材/3.jpg" alt="1"></a></li>
  428.             </ul>
  429.           </div>
  430.         </div>
  431.       </div>
  432.     </container>
  433.     <!--侧边栏-->
  434.     <aside class="cebianlan">
  435.       <ul>
  436.         <li class="cli1">
  437.           <a href="#"><i class="iconfont">&#xe692;</i><span>手机APP</span></a>
  438.         </li>
  439.         <div class="erweima2">
  440.           <img src="./图片素材/侧边栏二维码.png" alt="1" style="width: 100px; height: 100px;">
  441.           <span>扫码领取新人百元礼包</span>
  442.         </div>
  443.         <li>
  444.           <a href="#"><i class="iconfont">&#xe657;</i><span>个人中心</span></a>
  445.         </li>
  446.         <li>
  447.           <a href="#"><i class="iconfont">&#xe601;</i><span>售后服务</span></a>
  448.         </li>
  449.         <li>
  450.           <a href="#"><i class="iconfont">&#xec2e;</i><span>人工客服</span</a>
  451.         </li>
  452.         <li>
  453.           <a href="#"><i class="iconfont">&#xf0179;</i><span>购物车</span></a>
  454.         </li>
  455.       </ul>
  456.     </aside>

上方主体css部分代码：

  1. container {
  2.   width: 100%;
  3.   height: 670px;
  4. }
  5. .cbbox {
  6.   width: 1226px;
  7.   height: 670px;
  8.   margin: 0 auto;
  9. }
  10. .cmbox1 {
  11.   position: relative;
  12.   width: 1226px;
  13.   height: 460px;
  14. }
  15. .csbox1 {
  16.   position: absolute;
  17.   z-index: 90;
  18.   height: 460px;
  19.   width: 234px;
  20.   top: 0px;
  21.   left: 0px;
  22.   background-color: rgba(63, 61, 61, 0.8);
  23. }
  24. .csbox1 > ul {
  25.   width: 234px;
  26.   height: 420px;
  27.   padding: 20px 0;
  28. }
  29. .csbox1 .csli {
  30.   height: 42px;
  31.   line-height: 42px;
  32. }
  33. .csbox1 a {
  34.   color: white;
  35.   font-size: 14px;
  36.   display: inline-block;
  37.   width: 204px;
  38.   padding-left: 30px;
  39. }
  40. .csbox1 #csspan {
  41.   float: right;
  42.   font-size: 20px;
  43.   margin-right: 24px;
  44. }
  45. .csbox1 .csli:hover {
  46.   background-color: rgb(255, 103, 0);
  47. }
  48. .swiper {
  49.   width: 1226px;
  50.   height: 460px;
  51.   position: relative;
  52. }
  53. .swiper {
  54.   --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  55.   --swiper-navigation-color: rgb(167, 167, 168); /* 单独设置按钮颜色 */
  56.   --swiper-navigation-size: 30px; /* 设置按钮大小 */
  57.   overflow: hidden;
  58. }
  59. .swiper-wrapper img {
  60.   width: 1226px;
  61.   height: 460px;
  62. }
  63. .swiper .prev {
  64.   position: absolute;
  65.   left: 240px;
  66. }
  67. .swiper {
  68.   --swiper-pagination-color: rgb(121, 121, 123); /* 两种都可以 */
  69. }
  70. .cssbox {
  71.   position: absolute;
  72.   z-index: 90;
  73.   width: 0px;
  74.   height: 458px;
  75.   left: 233px;
  76.   top: 0px;
  77.   background-color: white;
  78.   overflow: hidden;
  79. }
  80. .cssbox a {
  81.   color: black;
  82.   padding: 0;
  83. }
  84. .cssbox > ul {
  85.   float: left;
  86.   width: 248px;
  87.   height: 458px;
  88. }
  89. .cssbox > ul > li {
  90.   width: 225px;
  91.   height: 40px;
  92.   padding: 18px 20px;
  93. }
  94. .cssbox span {
  95.   float: right;
  96.   margin-right: 86px;
  97.   line-height: 40px;
  98.   font-size: 12px;
  99. }
  100. .cssbox li:hover span {
  101.   color: rgb(255, 103, 0);
  102. }
  103. .csbox1 .csli:hover > .cssbox {
  104.   width: 993px;
  105.   border: 1px solid rgb(224, 224, 224);
  106.   box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.2);
  107. }
  108. .cmbox2 {
  109.   width: 1226px;
  110.   height: 170px;
  111.   margin-top: 14px;
  112. }
  113. .csbox2 {
  114.   float: left;
  115.   width: 234px;
  116.   height: 170px;
  117. }
  118. .csbox2 > ul {
  119.   width: 228px;
  120.   height: 164px;
  121.   background-color: rgb(95, 87, 80);
  122.   padding: 3px;
  123. }
  124. .csbox2 li {
  125.   position: relative;
  126.   float: left;
  127.   width: 70px;
  128.   height: 82px;
  129.   padding: 0 3px;
  130. }
  131. .csbox2 a {
  132.   color: rgb(207, 204, 202);
  133.   font-size: 12px;
  134.   display: inline-block;
  135.   width: 70px;
  136.   height: 46px;
  137.   padding-top: 18px;
  138. }
  139. .csbox2 i {
  140.   font-size: 24px;
  141.   margin: 0 23px 0 23px;
  142. }
  143. .csbox2 span {
  144.   display: block;
  145.   text-align: center;
  146.   margin-top: 4px;
  147. }
  148. .csbox2 li:hover > a {
  149.   color: rgb(255, 255, 255);
  150. }
  151. .csbox2 li::after {
  152.   content: "";
  153.   width: 1px;
  154.   height: 70px;
  155.   position: absolute;
  156.   top: 7px;
  157.   left: 0px;
  158.   background-color: rgb(102, 94, 87);
  159. }
  160. .csbox2 li::before {
  161.   content: "";
  162.   width: 65px;
  163.   height: 1px;
  164.   position: absolute;
  165.   top: 0px;
  166.   left: 6px;
  167.   background-color: rgb(102, 94, 87);
  168. }
  169. .csbox3 {
  170.   float: left;
  171.   width: 978px;
  172.   height: 170px;
  173.   margin-left: 14px;
  174. }
  175. .csbox3 li {
  176.   float: left;
  177. }
  178. .csbox3 img {
  179.   height: 170px;
  180. }
  181. .csbox3 li + li {
  182.   margin-left: 15px;
  183. }

侧边栏css代码：

  1. .cebianlan {
  2.   z-index: 200;
  3.   position: fixed;
  4.   right: 0;
  5.   top: 300px;
  6.   width: 84px;
  7.   height: 464px;
  8.   background-color: #fff;
  9.   border: 1px solid rgb(245, 245, 245);
  10. }
  11. .cebianlan > ul {
  12.   position: relative;
  13.   list-style: none;
  14. }
  15. .cebianlan li {
  16.   width: 84px;
  17.   height: 92px;
  18.   text-align: center;
  19.   border-bottom: 1px solid rgb(245, 245, 245);
  20. }
  21. .cebianlan ul a {
  22.   text-decoration: none;
  23.   color: #333;
  24. }
  25. .cebianlan li i {
  26.   display: block;
  27.   font-size: 30px;
  28.   margin: auto;
  29.   padding-top: 22px;
  30.   color: rgb(153, 153, 153);
  31. }
  32. .cebianlan ul a span {
  33.   font-size: 16px;
  34.   display: block;
  35.   color: rgb(153, 153, 153);
  36. }
  37. .cebianlan li:hover span {
  38.   color: rgb(255, 103, 0);
  39. }
  40. .cebianlan li:hover i {
  41.   color: rgb(255, 103, 0);
  42. }
  43. .erweima2 {
  44.   background-color: white;
  45.   position: absolute;
  46.   width: 100px;
  47.   height: 0px;
  48.   padding: 0px;
  49.   top: 0px;
  50.   left: -135px;
  51.   overflow: hidden;
  52. }
  53. .erweima2 > span {
  54.   display: block;
  55.   font-size: 14px;
  56.   width: 82px;
  57.   margin: 14px auto 0;
  58.   color: rgb(117, 117, 117);
  59.   text-align: center;
  60. }
  61. .cli1:hover + .erweima2 {
  62.   height: 162px;
  63.   border: 1px solid rgb(245, 245, 245);
  64.   padding: 14px;
  65. }
  66. .erweima2:hover {
  67.   height: 162px;
  68.   border: 1px solid rgb(245, 245, 245);
  69.   padding: 14px;
  70. }

 好了，今天的博客就先分享到这里，感谢大家的观看，有什么不懂或者出错的地方欢迎大家的指正，感谢大家的观看，共勉！

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/353526
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号