完成底边栏

Web/css/index.css

@@ -517,3 +517,93 @@ body {
   margin: 0;
   line-height: 1.4;
 }
+
+#footer {
+  background-color: #333;
+  color: #fff;
+  padding: 50px 0 20px;
+}
+
+.footer-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 0 20px;
+}
+
+.footer-section {
+  flex: 1;
+  min-width: 200px;
+  margin-bottom: 30px;
+}
+
+.footer-section h4 {
+  font-size: 18px;
+  margin-bottom: 20px;
+  position: relative;
+  padding-bottom: 10px;
+}
+
+.footer-section h4::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 30px;
+  height: 2px;
+  background-color: #0088ff;
+}
+
+.footer-section ul {
+  list-style: none;
+  padding: 0;
+}
+
+.footer-section ul li {
+  margin-bottom: 10px;
+  color: #999;
+  cursor: pointer;
+  transition: color 0.3s ease;
+}
+
+.footer-section ul li:hover {
+  color: #0088ff;
+}
+
+.contact-info p {
+  color: #999;
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+
+.footer-bottom {
+  text-align: center;
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #444;
+}
+
+.footer-bottom p {
+  color: #666;
+  font-size: 14px;
+}
+
+/* 响应式设计 */
+@media screen and (max-width: 768px) {
+  .footer-section {
+    flex: 0 0 50%;
+    padding: 0 15px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .footer-section {
+    flex: 0 0 100%;
+  }
+  
+  .footer-content {
+    padding: 0 15px;
+  }
+}

Web/index.html

@@ -206,7 +206,57 @@
       </div>
     </div>
     <div id="footer">
-      
+      <div class="footer-content">
+        <div class="footer-section">
+          <h4>关于我们</h4>
+          <ul>
+            <li>公司简介</li>
+            <li>发展历程</li>
+            <li>企业文化</li>
+            <li>招贤纳士</li>
+            <li>联系方式</li>
+          </ul>
+        </div>
+        <div class="footer-section">
+          <h4>产品中心</h4>
+          <ul>
+            <li>家用电器</li>
+            <li>电脑</li>
+            <li>手机</li>
+            <li>空调</li>
+            <li>其他产品</li>
+          </ul>
+        </div>
+        <div class="footer-section">
+          <h4>新闻中心</h4>
+          <ul>
+            <li>公司新闻</li>
+            <li>行业动态</li>
+            <li>媒体报道</li>
+            <li>活动专区</li>
+          </ul>
+        </div>
+        <div class="footer-section">
+          <h4>客户服务</h4>
+          <ul>
+            <li>在线客服</li>
+            <li>服务网点</li>
+            <li>售后政策</li>
+            <li>投诉建议</li>
+          </ul>
+        </div>
+        <div class="footer-section">
+          <h4>联系我们</h4>
+          <div class="contact-info">
+            <p>电话：400-123-4567</p>
+            <p>邮箱：contact@newman.com</p>
+            <p>地址：湖南省长沙市岳麓区xxx路xxx号</p>
+          </div>
+        </div>
+      </div>
+      <div class="footer-bottom">
+        <p>Copyright © 2024 Newman. All Rights Reserved. | Design by TechCo 技术支持：纽曼科技有限公司</p>
+      </div>
     </div>
   </body>
 </html>