在网站设计中,底部布局是不可或缺的一部分,它不仅承载着版权声明、联系方式等实用信息,还能提升网站的视觉效果,给用户留下深刻印象,以下是一份精心设计的网站底部源码,旨在帮助您打造一个专业、美观的网页底部布局。
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>网站底部设计源码</title> <style> .footer { background-color: #f5f5f5; color: #333; padding: 20px; text-align: center; } .footer p { margin: 0; font-size: 14px; } .footer ul { list-style: none; padding: 0; } .footer ul li { display: inline-block; margin-right: 20px; } .footer ul li a { color: #333; text-decoration: none; font-size: 14px; } .footer ul li a:hover { color: #ff6347; } .footer .social { margin-top: 20px; } .footer .social a { margin-right: 10px; } .footer .social a img { width: 24px; height: 24px; } .footer .contact { margin-top: 20px; } .footer .contact h4 { margin: 0; font-size: 16px; color: #333; } .footer .contact p { margin: 0; font-size: 14px; } </style> </head> <body> <footer class="footer"> <p>版权所有 © 2023 您的网站名称,保留所有权利。</p> <ul> <li><a href="about.html">关于我们</a></li> <li><a href="services.html">服务介绍</a></li> <li><a href="contact.html">联系我们</a></li> <li><a href="privacy.html">隐私政策</a></li> </ul> <div class="social"> <a href="https://www.facebook.com" target="_blank"><img src="facebook.png" alt="Facebook"></a> <a href="https://www.twitter.com" target="_blank"><img src="twitter.png" alt="Twitter"></a> <a href="https://www.linkedin.com" target="_blank"><img src="linkedin.png" alt="LinkedIn"></a> <a href="https://www.instagram.com" target="_blank"><img src="instagram.png" alt="Instagram"></a> </div> <div class="contact"> <h4>联系方式</h4> <p>邮箱:example@example.com</p> <p>电话:+86-123-456-7890</p> <p>地址:中国XX省XX市XX区XX路XX号</p> </div> </footer> </body> </html>
这段源码提供了一个简洁、实用的网站底部布局,以下是对源码的详细解析:
1、<footer>
标签定义了页面的底部区域。
2、.footer
类设置了底部的背景颜色、文字颜色、内边距和文本对齐方式。
图片来源于网络,如有侵权联系删除
3、.footer p
类用于设置底部版权信息的样式。
4、.footer ul
类定义了底部导航列表的样式,无序列表无项目符号,无边距。
5、.footer ul li
类使列表项水平排列,并设置了一定的间隔。
6、.footer ul li a
类定义了列表项中链接的样式,包括颜色和字体大小。
7、.footer ul li a:hover
类为链接添加了鼠标悬停效果,改变链接颜色。
图片来源于网络,如有侵权联系删除
8、.footer .social
类定义了社交链接的样式,包括间距和图片大小。
9、.footer .social a
类设置了社交链接的样式。
10、.footer .social a img
类设置了社交图标的大小。
11、.footer .contact
类定义了联系信息的样式。
12、.footer .contact h4
类设置了联系标题的样式。
图片来源于网络,如有侵权联系删除
13、.footer .contact p
类设置了联系信息的文本样式。
通过以上源码,您可以轻松实现一个专业、美观的网站底部布局,只需将这段代码复制到您的HTML文件中,并根据实际需求进行修改,即可为您的网站增添一份优雅的底部设计。
标签: #网站底部设计源码
评论列表