From bad55834d3845410aa0347aa42af6153ddb7d466 Mon Sep 17 00:00:00 2001
From: lsy2246 <lsy200546@hotmail.com>
Date: Thu, 16 May 2024 00:29:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=86=99=E5=AE=8C=E5=B0=9A=E5=93=81=E4=BC=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/shang_shopping/css/index.css | 150 ++++++++++++++++++++++++++++++-
 web/shang_shopping/index.html    |  95 +++++++++++++++++++-
 2 files changed, 241 insertions(+), 4 deletions(-)

diff --git a/web/shang_shopping/css/index.css b/web/shang_shopping/css/index.css
index a267b89..06eab72 100644
--- a/web/shang_shopping/css/index.css
+++ b/web/shang_shopping/css/index.css
@@ -432,6 +432,152 @@
 
 .floor .floor_info{
     height:432px;
-    background-color: skyblue;
 }
-/* endregion 楼层结束 */
\ No newline at end of file
+
+.floor .floor_info>div{
+    float: left;
+    font-size: 0;
+}
+
+.floor .floor_info .item1{
+    width: 230px;
+    height: 100%;
+    font-size: 0;
+}
+
+.floor .floor_info .item1 dl{
+    height: 108px;
+    width: 190px;
+    margin: 20px 20px 0;
+    font-size: 16px;
+}
+
+.floor .floor_info .item1 dt{
+    float: left;
+    width: 90px;
+    height: 22px;
+    line-height: 22px;
+    text-align: center;
+    padding-bottom: 3px;
+    border-bottom: 1px solid #D9D9D9;
+}
+
+.floor .floor_info .item1 dt a:link,.floor .floor_info .item1 dt a:visited
+{
+    font-size: 16px;
+    color: #666666;
+}
+
+.floor .floor_info .item1 dt a:hover{
+    color:red;
+}
+
+.floor .floor_info .item1 dt:nth-child(odd){
+    margin-right: 10px;
+}
+
+.floor .floor_info .item1 dt:nth-child(n+3){
+    margin-top: 14px;
+}
+
+.floor .floor_info .item1 img{
+    margin: 30px 18px;
+}
+
+.floor .floor_info .item2{
+    width: 340px;
+    height: 100%;
+}
+
+.floor .floor_info .item3{
+    background-color: skyblue;
+    width: 206px;
+    height: 100%;
+}
+
+.floor .floor_info .item3 img
+{
+    width: 206px;
+    height: 215px;
+}
+
+.floor .floor_info .item3 img:first-child{
+    border-bottom: 1px solid #D9D9D9;
+}
+
+
+.floor .floor_info .item4{
+    width: 206px;
+    height: 100%;
+    border-left: 1px solid #E2E2E2;
+    border-right: 1px solid #E2E2E2;
+}
+
+
+
+/* endregion 楼层结束 */
+
+/* region 页脚 */
+.footer{
+    margin-top: 48px;
+    background: #483E3E;
+    height: 1000px;
+    overflow:hidden
+}
+
+.footer a:link,.footer a:visited{
+    font-size: 14px;
+    color: #FFFFFF;
+    font-weight: bold;
+}
+
+.footer a:hover{
+    color:red;
+}
+
+.footer .top_link{
+    margin-top: 48px;
+    border-bottom: 1px solid #584D4D;
+    padding-bottom:22px;
+}
+
+.footer .top_link div{
+    width: 190px;
+    float: left;
+}
+
+.footer .top_link div:not(:last-child){
+    margin-right: 10px;
+}
+
+.footer .top_link div a{
+    display: block;
+    height: 32px;
+    line-height: 32px;
+}
+
+.footer .bottom_link{
+    margin-top: 47px;
+    text-align: center;
+}
+
+.footer .bottom_link dl{
+    display: flex;
+    align-items: center; /* 垂直居中 */
+    justify-content: center; /* 水平居中 */
+    margin-bottom: 10px;
+}
+
+.footer .bottom_link dl dd{
+    float: left;
+    height: 18px;
+    line-height: 18px;
+}
+
+.footer .bottom_link dl dd:not(:last-child):after{
+    content: "|";
+    margin: 0 26px;
+    color: #D9D9D9;
+}
+
+/* endregion 页脚 */
\ No newline at end of file
diff --git a/web/shang_shopping/index.html b/web/shang_shopping/index.html
index 7cd2058..c2d6906 100644
--- a/web/shang_shopping/index.html
+++ b/web/shang_shopping/index.html
@@ -374,7 +374,7 @@
     <!--楼层-->
     <div class="floor">
         <div class="container">
-            <div class="floor_nav float_clear">
+            <div class="floor_nav">
                 <span class="float_left">家用电器</span>
                 <dl class="float_right float_clear">
                     <dt><a href="#">热门</a></dt>
@@ -386,7 +386,98 @@
                     <dd><a href="#">高端家电</a></dd>
                 </dl>
             </div>
-            <div class="floor_info"></div>
+            <div class="floor_info">
+                <div class="item1">
+                    <dl class="float_clear">
+                        <dt><a href="#">节能补贴</a></dt>
+                        <dt><a href="#">4K电视</a></dt>
+                        <dt><a href="#">空气净化器</a></dt>
+                        <dt><a href="#">IH电饭煲</a></dt>
+                        <dt><a href="#">滚筒洗衣机</a></dt>
+                        <dt><a href="#">电热水器</a></dt>
+                    </dl>
+                    <img src="./images/编组.png" alt="编组">
+                </div>
+                <div class="item2">
+                    <img src="./images/appliance_banner07.png" alt="广告图1">
+                </div>
+                <div class="item3">
+                    <img src="./images/微波炉.png" alt="微波炉">
+                    <img src="./images/空气炸锅.png" alt="空气炸锅">
+                </div>
+                <div class="item4">
+                    <img src="./images/冰箱.png" alt="冰箱">
+                </div>
+                <div class="item3">
+                    <img src="./images/电饭煲.png" alt="电饭煲">
+                    <img src="./images/电饭煲2.png" alt="电饭煲2">
+                </div>
+            </div>
+        </div>
+    </div>
+    <!--页脚-->
+    <div class="footer">
+        <div class="container">
+            <div class="top_link float_clear">
+                <div>
+                    <a href="#">购物指南</a>
+                    <a href="#">购物流程</a>
+                    <a href="#">会员介绍</a>
+                    <a href="#">生活旅行</a>
+                    <a href="#">常见问题</a>
+                    <a href="#">大家电</a>
+                    <a href="#">联系客服</a>
+                </div>
+                <div>
+                    <a href="#">配送方式</a>
+                    <a href="#">上门自提</a>
+                    <a href="#">211限时达</a>
+                    <a href="#">配送服务查询</a>
+                    <a href="#">配送费收取标准</a>
+                </div>
+                <div>
+                    <a href="#">支付方式</a>
+                    <a href="#">货到付款</a>
+                    <a href="#">在线支付</a>
+                    <a href="#">分期付款</a>
+                    <a href="#">公司转账</a>
+                </div>
+                <div>
+                    <a href="#">售后服务</a>
+                    <a href="#">售后政策</a>
+                    <a href="#">价格保护</a>
+                    <a href="#">退款说明</a>
+                    <a href="#">返修/退换货</a>
+                    <a href="#">取消订单</a>
+                </div>
+                <div>
+                    <a href="#">特色服务</a>
+                    <a href="#">夺宝岛</a>
+                    <a href="#">DIY装机</a>
+                    <a href="#">延保服务</a>
+                    <a href="#">京东E卡</a>
+                    <a href="#">京东通信</a>
+                    <a href="#">京鱼座智能</a>
+                </div>
+                <div>
+                    <a href="#">自营覆盖区县<br>京尚品汇已向全国2661个区县提供自营配送服务，支持货到付款、POS 机刷卡和售后上门服务。<br>查看详情</a>
+                </div>
+            </div>
+            <div class="bottom_link">
+                <dl class="float_clear">
+                    <dd><a href="#">关于我们</a></dd>
+                    <dd><a href="#">联系我们</a></dd>
+                    <dd><a href="#">联系客服</a></dd>
+                    <dd><a href="#">合作招商</a></dd>
+                    <dd><a href="#">商家帮助</a></dd>
+                    <dd><a href="#">营销中心</a></dd>
+                    <dd><a href="#">手机商城</a></dd>
+                    <dd><a href="#">友情链接</a></dd>
+                    <dd><a href="#">销售联盟</a></dd>
+                    <dd><a href="#">隐私政策</a></dd>
+                </dl>
+                <a href="#">京ICP备12345678901</a>
+            </div>
         </div>
     </div>