css制作页眉页脚
使用CSS制作页眉
通过position: fixed或flex布局实现固定在页面顶部的页眉：
<header class="header">
<nav>
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">联系</a>
</nav>
</header>.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
padding: 1rem;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
z-index: 1000;
}
.header nav {
display: flex;
gap: 1.5rem;
justify-content: center;
}
.header a {
color: white;
text-decoration: none;
}使用CSS制作页脚
通过position: fixed或margin-top: auto实现固定在底部的页脚：
<footer class="footer">
<p>© 2023 公司名称. 保留所有权利.</p>
</footer>.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
}
/* 或使用flex布局 */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem;
margin-top: auto;
}响应式页眉页脚设计
通过媒体查询调整不同屏幕尺寸下的样式：
@media (max-width: 768px) {
.header nav {
flex-direction: column;
gap: 0.5rem;
}
.footer {
font-size: 0.8rem;
}
}添加页眉页脚分隔线
使用border属性增强视觉区分：
.header {
border-bottom: 1px solid #ddd;
}
.footer {
border-top: 1px solid #ddd;
}固定布局注意事项
当使用position: fixed时，确保主要内容不被遮挡：
main {
padding-top: 60px; /* 等于页眉高度 */
padding-bottom: 50px; /* 等于页脚高度 */
}
