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

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

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

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

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

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

运行结果就会正常：

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

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

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

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

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

<container>
      <div class="cbbox">
        <div class="cmbox1">
          <div class="swiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./图片素材/轮播图1.jpg" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./图片素材/轮播图2.webp" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./图片素材/轮播图3.webp" alt="" />
              </div>
              <div class="swiper-slide">
                <img src="./图片素材/轮播图4.webp" alt="" />
              </div>
            </div>
            <div class="swiper-button-prev prev"></div>
            <!--左箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-button-next"></div>
            <!--右箭头。如果放置在swiper外面，需要自定义样式。-->
            <div class="swiper-pagination" style="margin-left: 45%;"></div>
            <!--分页器。如果放置在swiper外面，需要自定义样式。-->
          </div>
          <div class="csbox1">
            <ul>
              <li class="csli">
                <a href="#">手机<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米12s.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">电视<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/红米电视x65.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">笔记本 平板<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiG笔记本.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">出行 穿戴<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米手环7Pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">耳机 音箱<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/RedmiBuds4pro.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">家电<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/壁挂空调.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">智能 路由器<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/小米路由器.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">电源 配件<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/移动电源.webp" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">健康 儿童<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/体重秤.png" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
              <li class="csli">
                <a href="#">生活 箱包<span id="csspan">></span></a>
                <div class="cssbox">
                  <ul>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                  <ul>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                    <li><a href="#"><img src="./图片素材/双肩包.jpg" alt="1"><span>Xiaomi 12S</span></a></li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="cmbox2">
          <div class="csbox2">
            <ul>
              <li>
                <a href="#"><i class="iconfont">&#xe60d;</i><span>保障服务</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe60f;</i><span>企业团购</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe731;</i><span>F码通道</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe894;</i><span>米粉卡</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe65c;</i><span>以旧换新</span></a>
              </li>
              <li>
                <a href="#"><i class="iconfont">&#xe6c8;</i><span>话费服务</span></a>
            </ul>
          </div>
          <div class="csbox3">
            <ul>
              <li><a href="#"><img src="./图片素材/1.jpg" alt="1"></a></li>
              <li><a href="#"><img src="./图片素材/2.jpg" alt="1"></a></li>
              <li><a href="#"><img src="./图片素材/3.jpg" alt="1"></a></li>
            </ul>
          </div>
        </div>
      </div>
    </container>
    <!--侧边栏-->
    <aside class="cebianlan">
      <ul>
        <li class="cli1">
          <a href="#"><i class="iconfont">&#xe692;</i><span>手机APP</span></a>
        </li>
        <div class="erweima2">
          <img src="./图片素材/侧边栏二维码.png" alt="1" style="width: 100px; height: 100px;">
          <span>扫码领取新人百元礼包</span>
        </div>
        <li>
          <a href="#"><i class="iconfont">&#xe657;</i><span>个人中心</span></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xe601;</i><span>售后服务</span></a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xec2e;</i><span>人工客服</span</a>
        </li>
        <li>
          <a href="#"><i class="iconfont">&#xf0179;</i><span>购物车</span></a>
        </li>
      </ul>
    </aside>

上方主体css部分代码：

container {
  width: 100%;
  height: 670px;
}
.cbbox {
  width: 1226px;
  height: 670px;
  margin: 0 auto;
}
.cmbox1 {
  position: relative;
  width: 1226px;
  height: 460px;
}
.csbox1 {
  position: absolute;
  z-index: 90;
  height: 460px;
  width: 234px;
  top: 0px;
  left: 0px;
  background-color: rgba(63, 61, 61, 0.8);
}
.csbox1 > ul {
  width: 234px;
  height: 420px;
  padding: 20px 0;
}
.csbox1 .csli {
  height: 42px;
  line-height: 42px;
}
.csbox1 a {
  color: white;
  font-size: 14px;
  display: inline-block;
  width: 204px;
  padding-left: 30px;
}
.csbox1 #csspan {
  float: right;
  font-size: 20px;
  margin-right: 24px;
}
.csbox1 .csli:hover {
  background-color: rgb(255, 103, 0);
}
.swiper {
  width: 1226px;
  height: 460px;
  position: relative;
}
.swiper {
  --swiper-theme-color: #ff6600; /* 设置Swiper风格 */
  --swiper-navigation-color: rgb(167, 167, 168); /* 单独设置按钮颜色 */
  --swiper-navigation-size: 30px; /* 设置按钮大小 */
  overflow: hidden;
}
.swiper-wrapper img {
  width: 1226px;
  height: 460px;
}
.swiper .prev {
  position: absolute;
  left: 240px;
}
.swiper {
  --swiper-pagination-color: rgb(121, 121, 123); /* 两种都可以 */
}
.cssbox {
  position: absolute;
  z-index: 90;
  width: 0px;
  height: 458px;
  left: 233px;
  top: 0px;
  background-color: white;
  overflow: hidden;
}
.cssbox a {
  color: black;
  padding: 0;
}
.cssbox > ul {
  float: left;
  width: 248px;
  height: 458px;
}
.cssbox > ul > li {
  width: 225px;
  height: 40px;
  padding: 18px 20px;
}
.cssbox span {
  float: right;
  margin-right: 86px;
  line-height: 40px;
  font-size: 12px;
}
.cssbox li:hover span {
  color: rgb(255, 103, 0);
}
.csbox1 .csli:hover > .cssbox {
  width: 993px;
  border: 1px solid rgb(224, 224, 224);
  box-shadow: 0 10px 8px 0 rgba(0, 0, 0, 0.2);
}
.cmbox2 {
  width: 1226px;
  height: 170px;
  margin-top: 14px;
}
.csbox2 {
  float: left;
  width: 234px;
  height: 170px;
}
.csbox2 > ul {
  width: 228px;
  height: 164px;
  background-color: rgb(95, 87, 80);
  padding: 3px;
}
.csbox2 li {
  position: relative;
  float: left;
  width: 70px;
  height: 82px;
  padding: 0 3px;
}
.csbox2 a {
  color: rgb(207, 204, 202);
  font-size: 12px;
  display: inline-block;
  width: 70px;
  height: 46px;
  padding-top: 18px;
}
.csbox2 i {
  font-size: 24px;
  margin: 0 23px 0 23px;
}
.csbox2 span {
  display: block;
  text-align: center;
  margin-top: 4px;
}
.csbox2 li:hover > a {
  color: rgb(255, 255, 255);
}
.csbox2 li::after {
  content: "";
  width: 1px;
  height: 70px;
  position: absolute;
  top: 7px;
  left: 0px;
  background-color: rgb(102, 94, 87);
}
.csbox2 li::before {
  content: "";
  width: 65px;
  height: 1px;
  position: absolute;
  top: 0px;
  left: 6px;
  background-color: rgb(102, 94, 87);
}
.csbox3 {
  float: left;
  width: 978px;
  height: 170px;
  margin-left: 14px;
}
.csbox3 li {
  float: left;
}
.csbox3 img {
  height: 170px;
}
.csbox3 li + li {
  margin-left: 15px;
}

侧边栏css代码：

.cebianlan {
  z-index: 200;
  position: fixed;
  right: 0;
  top: 300px;
  width: 84px;
  height: 464px;
  background-color: #fff;
  border: 1px solid rgb(245, 245, 245);
}
.cebianlan > ul {
  position: relative;
  list-style: none;
}
.cebianlan li {
  width: 84px;
  height: 92px;
  text-align: center;
  border-bottom: 1px solid rgb(245, 245, 245);
}
.cebianlan ul a {
  text-decoration: none;
  color: #333;
}
.cebianlan li i {
  display: block;
  font-size: 30px;
  margin: auto;
  padding-top: 22px;
  color: rgb(153, 153, 153);
}
.cebianlan ul a span {
  font-size: 16px;
  display: block;
  color: rgb(153, 153, 153);
}
.cebianlan li:hover span {
  color: rgb(255, 103, 0);
}
.cebianlan li:hover i {
  color: rgb(255, 103, 0);
}
.erweima2 {
  background-color: white;
  position: absolute;
  width: 100px;
  height: 0px;
  padding: 0px;
  top: 0px;
  left: -135px;
  overflow: hidden;
}
.erweima2 > span {
  display: block;
  font-size: 14px;
  width: 82px;
  margin: 14px auto 0;
  color: rgb(117, 117, 117);
  text-align: center;
}
.cli1:hover + .erweima2 {
  height: 162px;
  border: 1px solid rgb(245, 245, 245);
  padding: 14px;
}
.erweima2:hover {
  height: 162px;
  border: 1px solid rgb(245, 245, 245);
  padding: 14px;
}

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