diff --git a/Web/css/index.css b/Web/css/index.css index 89bb7ad..64d1067 100644 --- a/Web/css/index.css +++ b/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; + } +} diff --git a/Web/index.html b/Web/index.html index ab82298..a74869a 100644 --- a/Web/index.html +++ b/Web/index.html @@ -206,7 +206,57 @@