设置页眉页脚

在编写文档时，设置页眉和页脚是非常常见的需求。通过设置页眉页脚，可以给文档添加一些重要信息，比如页码、作者、文档标题等等。在本篇文章中，我们将详细介绍如何在HTML文档中设置页眉和页脚。

如何设置页眉

1. 首先，在HTML文档的标签中添加以下代码：

    <style>
        @page {
            margin-top: 50px;
            margin-bottom: 50px;
        }
        #header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: #333;
            color: white;
            text-align: center;
            line-height: 50px;
        }
    </style>
    

上面的代码中，我们首先使用@page来设置页面的上下边距，这里我们设置为50px。接着，我们定义一个id为“header”的元素，用于显示页眉。这个元素使用了position为fixed，即在页面滚动时会一直保持在顶部；top为0，即距离页面顶部0px；left和right分别为0，即距离页面左右两侧0px；height为50px，即高度为50px；background-color为#333，即背景为深灰色；color为white，即文字颜色为白色；text-align为center，居中对齐；line-height为50px，即行高为50px。

2. 在HTML文档的标签中添加以下代码：

    <div id=\"header\">
        <h1>这是页眉</h1>
    </div>
    

上面的代码中，我们在中定义一个id为“header”的div元素，并在其中添加

标签，用于显示页眉的内容。你可以根据你的需求来修改页眉的内容。

如何设置页脚

1. 首先，在HTML文档的标签中添加以下代码：

    <style>
        #footer {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 50px;
            background-color: #333;
            color: white;
            text-align: center;
            line-height: 50px;
        }
    </style>
    

上面的代码中，我们定义一个id为“footer”的元素，用于显示页脚。这个元素使用了position为fixed，即在页面滚动时会一直保持在底部；bottom为0，即距离页面底部0px；left和right分别为0，即距离页面左右两侧0px；height为50px，即高度为50px；background-color为#333，即背景为深灰色；color为white，即文字颜色为白色；text-align为center，居中对齐；line-height为50px，即行高为50px。

2. 在HTML文档的标签中添加以下代码：

    <div id=\"footer\">
        <p>这是页脚</p>
    </div>
    

上面的代码中，我们在中定义一个id为“footer”的div元素，并在其中添加

标签，用于显示页脚的内容。你可以根据你的需求来修改页脚的内容。

至此，我们已经完成了页眉和页脚的设置。当你预览页面时，你会发现，页眉和页脚已经显示在了页面上。这种设置方式兼容大多数现代浏览器，但对于某些旧浏览器会有兼容性问题。如果你需要支持旧浏览器，可以通过一些JavaScript代码来实现。