css页尾制作
CSS页尾制作方法
固定定位页尾
使用position: fixed将页尾固定在页面底部，适用于内容较少的页面：
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #333;
color: white;
padding: 20px;
text-align: center;
}弹性布局页尾
通过Flexbox实现动态页脚，适合内容高度不固定的页面：
<body style="display: flex; flex-direction: column; min-height: 100vh;">
<main style="flex: 1;">内容区域</main>
<footer style="background: #222; color: #fff; padding: 20px;">
页尾内容
</footer>
</body>网格布局页尾
使用CSS Grid布局控制页脚位置：
body {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100vh;
}
footer {
grid-row: 3;
background: #444;
padding: 15px;
}响应式页尾设计
添加媒体查询适应不同屏幕尺寸：
footer {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 30px;
padding: 40px 5%;
}
@media (max-width: 768px) {
footer {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 480px) {
footer {
grid-template-columns: 1fr;
}
}页尾内容样式建议
- 使用
max-width限制内容宽度并居中 - 添加社交媒体图标链接
- 包含版权信息和导航链接
.footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer-links a { color: #ddd; margin-right: 15px; text-decoration: none; }
.social-icons img { width: 24px; height: 24px; margin-left: 10px; }
