在HTML中编写页眉和页脚是一种常见的做法，它们通常用于显示网站的导航菜单、版权信息、联系信息等，页眉一般位于页面的顶部，而页脚则位于页面的底部，在这篇文章中，我们将详细介绍如何使用HTML和CSS来创建一个简单的页眉和页脚。
1. HTML结构
我们需要创建一个基本的HTML5文档结构，在<body>标签内部，我们将使用两个主要的容器：一个用于页眉（header），另一个用于页脚（footer）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>带页眉页脚的页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<!-- 页眉内容 -->
</header>
<main>
<!-- 页面主要内容 -->
</main>
<footer>
<!-- 页脚内容 -->
</footer>
</body>
</html>
2. CSS样式
为了使页眉和页脚看起来更加专业，我们需要添加一些CSS样式，我们可以创建一个名为styles.css的文件，并添加以下样式：
/* 页面整体样式 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
/* 页眉样式 */
header {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
}
/* 页脚样式 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: fixed;
bottom: 0;
width: 100%;
}
3. 页眉和页脚内容
现在我们可以在<header>和<footer>标签内添加我们想要显示的内容，我们可以在页眉中添加一个导航菜单，在页脚中添加版权信息。
<header>
<h1>我的网站</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<footer>
<p>版权所有 © 2023 我的网站</p>
</footer>
4. 响应式设计
为了确保页眉和页脚在不同设备上都能正确显示，我们可以使用媒体查询（Media Queries）来调整样式。
/响应式设计当屏幕宽度小于600px时 */
@media (max-width: 600px) {
header nav ul {
display: flex;
flex-direction: column;
}
header nav li {
margin-bottom: 0.5em;
}
}
5. 总结
通过上述步骤，我们已经创建了一个带有页眉和页脚的基本HTML页面，页眉通常包含网站的导航菜单、logo等，而页脚则包含版权信息、联系信息等，使用CSS，我们可以轻松地为这些元素添加样式，使它们看起来更加专业，通过媒体查询，我们可以实现响应式设计，确保页面在不同设备上都能保持良好的显示效果。
还没有评论，来说两句吧...