HTML5+CSS3实现小米商城（课程设计版）

迷南。 2024-02-19 08:32 10阅读 0赞

## 前言 ##

这个小米商城用到了html+css+js，内容是今年6月份的。  
结构相对简单，比较容易理解。  
如果想要纯html+css实现的小米商城，可以看我的这个作品  
[HTML+CSS实现小米商城][HTML_CSS]  
如果需要其他网页作品了，可以看主页其他作品。  
[HTML+CSS实现华为商城][HTML_CSS 1]  
[HTML+CSS实现华为官网][HTML_CSS 2]  
[HTML+CSS实现哔哩哔哩首页][HTML_CSS 3]  
[HTML+CSS实现小米官网][HTML_CSS 4]  
[HTML+CSS实现QQ注册页面][HTML_CSS_QQ]  
下面先展示一个页面整体结构，然后再分析一下实现代码吧！  
文章末尾附项目源代码！！！

## 一、效果展示 ##

![在这里插入图片描述][d8158c23b4de47b3bdbb55fde0cb73f8.png]

![在这里插入图片描述][042a0417f1724e35b370a1c3f2ca8274.png]

![在这里插入图片描述][41242365c4674961bbf5f1523fe5e0a2.png]  
![在这里插入图片描述][ad557081ad204f18a637c628ffa61268.png]  
![在这里插入图片描述][81e8c11503de4c7e860a159a9eb2acae.png]![在这里插入图片描述][3d969aed2c8c42e88420c89f30722e2e.png]

## 二、代码分析 ##

#### 注：因为代码过多，这里仅展示部分，完整代码在文章末尾 ####

### 1.轮播图部分 ###

.head3 {  // CSS部分
             width: 1226px;
             margin-left: 146px;
             margin-right: 146px;
             height: 400px;
             margin-top: 14px;
             margin-bottom: 35px;
             overflow: hidden;
             float: left;
         }
    
         .head3_lunbo {
             width: 4904px;
             height: 400px;
             animation: text 15s infinite backwards;
             /*消除图片间隔*/
    
         }
    
         .head3_lunbo img {
             width: 1226px;
             height: 400px;
             float: left;
         }
    
         @keyframes text {
    
             /*0%-20%是播放下一个图片，0%-10%是图片暂停的时间*/
             0%,
             20% {
                 margin-left: 0px;
             }
    
             25%,
             45% {
                 margin-left: -1226px;
             }
    
             50%,
             70% {
                 margin-left: -2452px;
             }
    
             75%,
             100% {
                 margin-left: -3678px;
             }
         }

### 2.广告块部分 ###

<div class="con2">
 <div class="con2_1">
 手机
 <a class="con2_1_a" href="#">
 查看更多
 
 </a>
 </div>
 <div class="con2_2">
 <div class="con2_2_1">
 <a href="#">
 <img src="shouji.png" style="height: 631px;">
 </a>
 </div>
 <div class="con2_2_2">
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji1.webp">
 <h4 class="con2_2_h">Xiaomi 12S Ultra</h4>
 这真徕卡  |  专业徕卡影像
 
 9.9元起
 5999元起
 </a>
 </div>
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji2.webp">
 <h4 class="con2_2_h">Xiaomi 12S Pro</h4>
 骁龙8+ 旗舰处理器  |  徕卡影像
 
 8.8元起
 5999元起
 </a>
 </div>
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji3.webp">
 <h4 class="con2_2_h">Xiaomi 12S</h4>
 小尺寸性能旗舰  |  徕卡影像
 
 3999元起
 </a>
 </div>
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji4.webp">
 <h4 class="con2_2_h">Xiaomi 12S Pro 天玑版</h4>
 
 全球首发天玑9000+  |  叶脉冷泵散热系统超强
 3999元起
 </a>
 </div>
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji5.webp">
 <h4 class="con2_2_h">Redmi Note 11T Pro+</h4>
 天玑8100  |  真旗舰芯
 61.88元起
 5999元起
 </a>
 </div>
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji6.webp">
 <h4 class="con2_2_h">Redmi Note 11T Pro</h4>
 天玑8100  |  真旗舰芯
 1699元起
 </a>
 </div>
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji7.webp">
 <h4 class="con2_2_h">Redmi Note 11SE</h4>
 双卡双5G  |  疾速登陆
 0.01元起
 5999元起
 </a>
 </div>
 <div class="con2_2_2_div">
 <a class="con2_2_a" href="#">
 <img class="con2_2_2_img" src="shouji8.webp">
 <h4 class="con2_2_h">Xiaomi Civi 1S</h4>
 
 原生美肌人像  |  奇迹阳光动人新色  |  旗舰神机器
 2299元起
 </a>
 </div>
 </div>
 </div>
 </div>

.con2 {  // CSS部分
             width: 1226px;
             height: 672px;
         }
    
         .con2_1 {
             width: 1226px;
             height: 58px;
         }
    
         .con2_1_a {
             display: inline-block;
             text-decoration: none;
         }
    
         .con2_1_img {
             display: inline-block;
             background-image: url(xiala.jpg);
             background-repeat: no-repeat;
             width: 38px;
             height: 34px;
             position: relative;
             top: 10px;
         }
    
         .con2_1_s1 {
             font-size: 24px;
             margin-right: 1050px;
             line-height: 58px;
             font-weight: 150;
         }
    
         .con2_1_s2 {
             color: #454349;
             /* margin-bottom: 5px; */
             /* float: right; */
         }
    
         .con2_1_s2:hover {
             color: #ff6700;
         }
    
         .con2_2 {
             width: 1226px;
             height: 641px;
         }
    
         .con2_2_1 {
             display: inline-block;
             width: 224px;
             height: 641px;
             margin-top: 10px;
             margin-right: 14px;
             transition: all .2s linear;
         }
    
         .con2_2_1_plus {
             display: inline-block;
             width: 224px;
             height: 61px;
             margin-top: 10px;
             margin-right: 14px;
             /* transition: all .2s linear; */
         }
    
         .con2_2_1_pro {
             display: inline-block;
             width: 224px;
             height: 61px;
             margin-top: 10px;
             margin-right: 14px;
             /* transition: all .2s linear; */
         }
    
         /* .con2_2_1:hover {
             box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1);
             margin-top: 8px;
         } */
    
         .con2_2_2 {
             width: 973px;
             height: 641px;
             /* background-color: blue; */
             /* position: relative; */
             display: -webkit-flex;
             display: flex;
             /* -webkit-flex-wrap: wrap; */
             flex-wrap: wrap;
             float: right;
             align-content: space-between;
             justify-content: space-between;
         }
    
         .con2_2_2_div {
             display: inline-block;
             width: 230px;
             height: 308px;
             background-color: #ffffff;
             margin-top: 10px;
             /* display: block; */
             transition: all .2s linear;
         }
    
         .con2_2_2_div:hover {
             box-shadow: 4px 20px 40px 5px rgba(0, 0, 0, .1);
             margin-top: 8px;
             /* margin-bottom: 8px; */
         }
    
         .con2_2_2_div_plus {
             margin-top: 50px;
             display: inline-block;
             width: 230px;
             height: 30px;
             background-color: #ffffff;
             /* margin-top: 10px; */
             /* display: block; */
         }
    
    
         .con2_2_a {
             display: inline-block;
             width: 230px;
             height: 308px;
             text-decoration: none;
         }
    
         .con2_2_2_img {
             width: 150px;
             height: 165px;
             margin-left: 40px;
             margin-top: 20px;
         }
    
         .con2_2_h {
             color: #444444;
             font-weight: 500;
             font-size: 15px;
             /* margin-left: 56px; */
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             text-align: center;
         }
    
         .con2_2_p1 {
             font-size: 12px;
             color: #b1b0b1;
             /* margin-left: 45px; */
             margin-top: 7px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             text-align: center;
         }
    
         .con2_2_p2 {
             font-size: 15px;
             color: #ff6c0d;
             /* margin-left: 79px; */
             margin-top: 10px;
             text-align: center;
         }

### 3.右侧固定栏 ###

<!-- HTML部分 --! >
 <div class="cebian">
 <div class="cebian_1">
 <a href="#">
 <img src="cebian1.png">
 手机APP
 </a>
 <div class="cebian_2" style="width: 150px;height: 180px;">
 <img src="erweima.png" style="width:80px ;height:80px;">
 扫码领取新
 人百元红包
 </div>
 </div>
 <div><a href="#">
 <img src="cebian2.png">
 个人中心
 </a></div>
 <div><a href="#">
 <img src="cebian3.png">
 售后服务
 </a></div>
 <div><a href="#">
 <img src="cebian4.png">
 人工服务
 </a></div>
 <div><a href="#" class="cebiandiv">
 <img src="cebian5.png">
 购物车
 </a></div>
 </div>

.cebian {
             position: fixed;
             width: 94px;
             height: 455px;
             top: 40px;
             background-color: #ffffff;
             left: 1423px;
             border-left: 1px solid #f6f6f6;
             border-bottom: 1px solid #f6f6f6;
             border-top: 1px solid #f6f6f6;
         }
    
         .cebian div {
             width: 94px;
             height: 91px;
             border-bottom: 1px solid #f6f6f6;
    
         }
    
         .cebian_1 {
             width: 94px;
             height: 91px;
             border-bottom: 1px solid #f6f6f6;
             z-index: 5;
         }
    
         .cebian_2 {
             /* padding: 14px; */
             background-color: #ffffff;
             position: absolute;
             left: -150px;
             top: -1px;
             border-bottom: 1px solid #f6f6f6;
             display: none;
             z-index: 5;
         }
    
         .cebian_1:hover .cebian_2 {
             display: block;
             z-index: 5;
         }
    
    
    
    
         .cebiandiv {
             border-bottom: 1px solid #f5f5f5;
         }
    
         .cebian img {
             margin-top: 18px;
             margin-left: 32px;
             /* margin: 0 auto; */
             width: 30px;
             height: 30px;
         }
    
         .cebian p {
             color: #999999;
             text-align: center;
         }
    
         .cebian a {
             display: inline-block;
             text-decoration: none;
             width: 94px;
             height: 91px;
    
         }
    
         .cebian p:hover {
             color: #ff6700;
         }

### 4.左侧导航栏 ###

<img src="dianshi2.webp">
 Xiaomi 12S
 
 <img src="shouji3.webp">
 Note 11T Pro
 
 <img src="dianshi5.webp">
 小米电视ES43 2022款
 
 
 </div>
 </div>
 
 
 <div class="head3_div1_4">
 
 出行 穿戴
 
 
 <div class="head3_div4_1_2">
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 
 <img src="dianshi2.webp">
 Redmi 10A
 
 <img src="shouji1.webp">
 Redmi X65 2022款
 
 <img src="dianshi2.webp">
 小米电视6至尊版 65英寸
 
 
 <img src="shouji3.webp">
 iphone 13
 
 <img src="dianshi5.webp">
 小米电视6 65" OLED
 
 <img src="bijiben4.webp">
 小米电视5 75英寸
 
 <img src="shouji2.webp">
 Xiaomi 12S
 
 <img src="dianshi1.webp">
 Redmi K50
 
 <img src="shouji3.webp">
 Redmi智能电视X55 55英寸
 
 
 <img src="shouji5.webp">
 小米电视ES43 2022款
 
 
 
 
 <img src="dianshi7.webp">
 小米电视5 75英寸
 
 <img src="shouji6.webp">
 小米电视5 75英寸
 
 
 
 
 <img src="dianshi8.webp">
 Redmi K40S
 
 <img src="shouji1.webp">
 小米电视5 75英寸
 
 
 </div>
 </div>
 
 
 
 <div class="head3_div1_5">
 
 耳机 音箱
 
 
 <div class="head3_div5_1_2">
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 
 <img src="dianshi2.webp">
 Redmi 10A
 
 <img src="shouji1.webp">
 Redmi X65 2022款
 
 <img src="dianshi2.webp">
 小米电视6至尊版 65英寸
 
 
 <img src="shouji3.webp">
 iphone 13
 
 <img src="dianshi5.webp">
 小米电视6 65" OLED
 
 <img src="bijiben4.webp">
 小米电视5 75英寸
 
 <img src="shouji2.webp">
 Xiaomi 12S
 
 <img src="dianshi1.webp">
 Redmi K50
 
 <img src="shouji3.webp">
 Redmi智能电视X55 55英寸
 
 
 <img src="shouji5.webp">
 小米电视ES43 2022款
 
 
 
 
 <img src="dianshi7.webp">
 小米电视5 75英寸
 
 <img src="shouji6.webp">
 小米电视5 75英寸
 
 <img src="shouji5.webp">
 Xiaomi 12S
 
 
 
 
 <img src="shouji1.webp">
 小米电视5 75英寸
 
 <img src="shouji6.webp">
 Xiaomi 12S
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 
 
 
 <img src="dianshi2.webp">
 Xiaomi 12S
 
 <img src="shouji3.webp">
 Note 11T Pro
 
 <img src="dianshi5.webp">
 小米电视ES43 2022款
 
 
 </div>
 </div>
 
 
 <div class="head3_div1_6">
 
 家电
 
 
 <div class="head3_div6_1_2">
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 
 <img src="dianshi2.webp">
 Redmi 10A
 
 <img src="shouji1.webp">
 Redmi X65 2022款
 
 <img src="dianshi2.webp">
 小米电视6至尊版 65英寸
 
 
 <img src="shouji3.webp">
 iphone 13
 
 <img src="dianshi5.webp">
 小米电视6 65" OLED
 
 <img src="bijiben4.webp">
 小米电视5 75英寸
 
 <img src="shouji2.webp">
 Xiaomi 12S
 
 <img src="dianshi1.webp">
 Redmi K50
 
 <img src="shouji3.webp">
 Redmi智能电视X55 55英寸
 
 
 <img src="shouji5.webp">
 小米电视ES43 2022款
 
 <img src="shouji4.webp">
 Xiaomi 12S
 
 <img src="dianshi7.webp">
 小米电视5 75英寸
 
 <img src="shouji6.webp">
 小米电视5 75英寸
 
 <img src="shouji5.webp">
 Xiaomi 12S
 
 <img src="dianshi8.webp">
 Redmi K40S
 
 <img src="shouji1.webp">
 小米电视5 75英寸
 
 <img src="shouji6.webp">
 Xiaomi 12S
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 <img src="shouji6.webp">
 黑鲨5
 
 <img src="dianshi2.webp">
 Xiaomi 12S
 
 <img src="shouji3.webp">
 Note 11T Pro
 
 <img src="dianshi5.webp">
 小米电视ES43 2022款
 
 <img src="dianshi7.webp">
 小米电视ES43 2022款
 
 </div>
 </div>
 
 
 <div class="head3_div1_7">
 
 智能 路由器
 
 
 <div class="head3_div7_1_2">
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 
 <img src="dianshi2.webp">
 Redmi 10A
 
 <img src="shouji1.webp">
 Redmi X65 2022款
 
 <img src="dianshi2.webp">
 小米电视6至尊版 65英寸
 
 
 <img src="shouji3.webp">
 iphone 13
 
 <img src="dianshi5.webp">
 小米电视6 65" OLED
 
 <img src="bijiben4.webp">
 小米电视5 75英寸
 
 <img src="shouji2.webp">
 Xiaomi 12S
 
 
 
 
 <img src="shouji3.webp">
 Redmi智能电视X55 55英寸
 
 
 <img src="shouji5.webp">
 小米电视ES43 2022款
 
 
 
 
 <img src="dianshi7.webp">
 小米电视5 75英寸
 
 <img src="shouji6.webp">
 小米电视5 75英寸
 
 
 
 
 <img src="dianshi8.webp">
 Redmi K40S
 
 <img src="shouji1.webp">
 小米电视5 75英寸
 
 
 </div>
 </div>
 
 
 
 <div class="head3_div1_8">
 
 电源 配件
 
 
 <div class="head3_div8_1_2">
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 
 <img src="dianshi2.webp">
 Redmi 10A
 
 <img src="shouji1.webp">
 Redmi X65 2022款
 
 <img src="dianshi2.webp">
 小米电视6至尊版 65英寸
 
 
 <img src="shouji3.webp">
 iphone 13
 
 <img src="dianshi5.webp">
 小米电视6 65" OLED
 
 <img src="bijiben4.webp">
 小米电视5 75英寸
 
 <img src="shouji2.webp">
 Xiaomi 12S
 
 <img src="dianshi1.webp">
 Redmi K50
 
 <img src="shouji3.webp">
 Redmi智能电视X55 55英寸
 
 
 <img src="shouji5.webp">
 小米电视ES43 2022款
 
 
 </div>
 </div>
 
 
 <div class="head3_div1_9">
 
 健康 儿童
 
 
 <div class="head3_div9_1_2">
 
 <img src="dianshi1.webp">
 Xiaomi 12S
 
 
 <img src="dianshi2.webp">
 Redmi 10A
 
 <img src="shouji1.webp">
 Redmi X65 2022款
 
 <img src="dianshi2.webp">
 小米电视6至尊版 65英寸
 
 
 <img src="shouji3.webp">
 iphone 13
 
 <img src="dianshi5.webp">
 小米电视6 65" OLED
 
 <img src="bijiben4.webp">
 小米电视5 75英寸
 
 <img src="shouji2.webp">
 Xiaomi 12S
 
 <img src="dianshi1.webp">
 Redmi K50
 
 <img src="shouji3.webp">
 Redmi智能电视X55 55英寸
 
 
 <img src="shouji5.webp">
 小米电视ES43 2022款
 
 <img src="shouji4.webp">
 Xiaomi 12S
 
 <img src="dianshi7.webp">
 小米电视5 75英寸
 
 <img src="shouji6.webp">
 小米电视5 75英寸
 
 
 
 
 <img src="dianshi8.webp">
 Redmi K40S
 
 <img src="shouji1.webp">
 小米电视5 75英寸
 
 
 </div>
 </div>
 
 </div>
 
 </div>

// CSS 部分
     .head3_div1 {
             width: 234px;
             height: 400px;
             /* padding-top: 20px; */
             /* padding-bottom: 20px; */
             /* background-color: #7d7389; */
             background-color: rgba(105, 101, 101, .6);
             position: absolute;
             /* top: -40px; */
             top: 154px;
         }
    
         .head3_div1_1 {
             width: 234px;
             height: 62px;
             color: #ffffff;
             position: absolute;
             float: left;
         }
         .head3_div1_s {
    
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             margin-top: 20px;
         }
         .head3_div1_s1 {
             margin-left: 40px;
             float: left;
             position: absolute;
             top: 28px;
         }
         .head3_div1_s2 {
             background-image: url(you.png);
             width: 16px;
             height: 16px;
             background-repeat: no-repeat;
             position: absolute;
             right: 20px;
             top: 30px;
         }
         .head3_div1_s:hover {
             background-color: #ff6700;
         }
         .head3_div1_1_2 {
             width: 992px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -993px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
    
         }
         .head3_div1_1_2s {
             /* display: inline-block; */
             width: 247px;
             height: 65px;
             /* background-color: aqua; */
             float: left;
             /* margin: 10px; */
         }
         .head3_div1_1_2s img {
             margin-left: 20px;
             height: 60px;
             width: 45px;
         }
         .head3_div1_1_2s span {
             color: #3e3e3e;
             position: relative;
             top: -28px;
             font-size: 14px;
         }
         .head3_div1_1_2s span:hover {
             color: #ff6700;
             cursor: pointer;
         }
         .head3_div1_1:hover .head3_div1_1_2 {
             display: block;
         }
         .head3_div1_2 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 62px;
             color: #ffffff;
         }
         .head3_div2_s {
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div2_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div2_s:hover {
             background-color: #ff6700;
         }
         .head3_div2_1_2 {
             width: 992px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -993px;
             top: -62px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_2:hover .head3_div2_1_2 {
             display: block;
         }
         .head3_div1_3 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 104px;
             color: #ffffff;
         }
         .head3_div3_s {
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div3_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div3_s:hover {
             background-color: #ff6700;
         }
         .head3_div3_1_2 {
             width: 992px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -993px;
             top: -104px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_3:hover .head3_div3_1_2 {
             display: block;
         }
         .head3_div1_4 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 146px;
             color: #ffffff;
         }
         .head3_div4_s {
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div4_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div4_s:hover {
             background-color: #ff6700;
         }
         .head3_div4_1_2 {
             width: 741px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -742px;
             top: -146px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_4:hover .head3_div4_1_2 {
             display: block;
         }
         .head3_div1_5 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 188px;
             color: #ffffff;
         }
         .head3_div5_s {
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div5_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div5_s:hover {
             background-color: #ff6700;
         }
         .head3_div5_1_2 {
             width: 992px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -993px;
             top: -188px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_5:hover .head3_div5_1_2 {
             display: block;
         }
       .head3_div1_6 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 230px;
             color: #ffffff;
         }
    
         .head3_div6_s {
    
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div6_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div6_s:hover {
             background-color: #ff6700;
         }
         .head3_div6_1_2 {
             width: 992px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -993px;
             top: -230px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_6:hover .head3_div6_1_2 {
             display: block;
         }
      .head3_div1_7 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 272px;
             color: #ffffff;
         }
         .head3_div7_s {
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div7_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div7_s:hover {
             background-color: #ff6700;
         }
         .head3_div7_1_2 {
             width: 741px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -742px;
             top: -272px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_7:hover .head3_div7_1_2 {
             display: block;
         }
      .head3_div1_8 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 314px;
             color: #ffffff;
         }
         .head3_div8_s {
    
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div8_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div8_s:hover {
             background-color: #ff6700;
         }
         .head3_div8_1_2 {
             width: 498px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -499px;
             top: -314px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_8:hover .head3_div8_1_2 {
             display: block;
         }
         .head3_div1_9 {
             width: 234px;
             height: 42px;
             /* float: left; */
             position: absolute;
             top: 356px;
             color: #ffffff;
         }
         .head3_div9_s {
             width: 234px;
             height: 42px;
             /* padding-left: 30px; */
             float: left;
             /* margin-top: 20px; */
         }
         .head3_div9_s>span {
             position: absolute;
             top: 10px;
         }
         .head3_div9_s:hover {
             background-color: #ff6700;
         }
         .head3_div9_1_2 {
             width: 741px;
             height: 400px;
             /* background-color: red; */
             background-color: #ffffff;
             /* position: relative; */
             position: absolute;
             right: -742px;
             top: -356px;
             /* top: -120px; */
             display: -webkit-flex;
             display: flex;
             -webkit-flex-wrap: wrap;
             align-content: flex-start;
             /* flex-grow: 1; */
             display: none;
         }
         .head3_div1_9:hover .head3_div9_1_2 {
             display: block;
         }
         .head3_div1_10 {
             width: 234px;
             height: 42px;
         }

## 三、完整项目源代码 ##

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

[HTML_CSS]: https://blog.csdn.net/m0_63512120/article/details/125885820?spm=1001.2014.3001.5501
[HTML_CSS 1]: https://blog.csdn.net/m0_63512120/article/details/130963321?spm=1001.2014.3001.5501
[HTML_CSS 2]: https://blog.csdn.net/m0_63512120/article/details/130961765?spm=1001.2014.3001.5501
[HTML_CSS 3]: https://blog.csdn.net/m0_63512120/article/details/129710606?spm=1001.2014.3001.5501
[HTML_CSS 4]: https://blog.csdn.net/m0_63512120/article/details/129443760?spm=1001.2014.3001.5501
[HTML_CSS_QQ]: https://blog.csdn.net/m0_63512120/article/details/125894002?spm=1001.2014.3001.5501
[d8158c23b4de47b3bdbb55fde0cb73f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/3825ddd277e648a180c01292e69e6560.png
[042a0417f1724e35b370a1c3f2ca8274.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/03a48711de8c4995b6f33bc6c5b31b82.png
[41242365c4674961bbf5f1523fe5e0a2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/4f4e4eeb5e7247b3b8a646f8768ecd59.png
[ad557081ad204f18a637c628ffa61268.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/05e43c1929e3483baa2d4ccf1ff249cf.png
[81e8c11503de4c7e860a159a9eb2acae.png]: https://img-blog.csdnimg.cn/81e8c11503de4c7e860a159a9eb2acae.png
[3d969aed2c8c42e88420c89f30722e2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/19/1976629dc7694564bc49036ff4b25cc5.png