CSS page 打印眉脚

一、背景介绍

在实际的网页制作中，有时候需要打印网页内容，比如打印一篇文章或者打印一份表格等。而在打印页面的时候，通常会需要一些额外的内容，比如页眉和页脚。在网页设计中，我们可以使用 CSS 来控制如何在打印页面中显示这些额外内容，其中包括打印眉脚。

眉脚在打印页面中起到了很重要的作用，它可以包含打印日期、页面标题、页码等信息，帮助阅读者更方便地查看打印内容。因此，在设计打印页面时，我们需要考虑如何通过 CSS 来控制眉脚的显示和样式。

二、如何实现打印眉脚

1. CSS `@media print` 媒体查询

在 CSS 中，我们可以使用 @media print 媒体查询来设置在打印页面中的样式。通过这个媒体查询，我们可以单独为打印页面设置样式，包括眉脚的显示和样式。

2. 设置打印眉脚

要设置打印页面的眉脚，我们可以使用 CSS 的 @page 规则，通过 @page 规则可以设置打印样式中包括页眉和页脚。

具体的实现方法如下：

@page {
    @top-center {
        content: "页眉内容";
    }

    @bottom-center {
        content: "页脚内容";
    }
}

在上面的代码中，我们使用 @page 规则来设置打印页面的样式，在 @top-center 中设置页眉的内容，在 @bottom-center 中设置页脚的内容。这样就可以在打印页面中显示自定义的页眉和页脚内容。

3. 示例代码

下面是一个简单的示例代码，演示如何通过 CSS 来设置打印页面的眉脚内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Print Page Header and Footer</title>
    <style>
        @media print {
            @page {
                @top-center {
                    content: "Print Page Header";
                }

                @bottom-center {
                    content: "Page {page} of {pages}";
                }
            }
        }
    </style>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>This is a demo page for printing with custom header and footer.</p>
</body>
</html>

在上面的示例代码中，我们通过 @media print 媒体查询和 @page 规则来设置打印页面的眉脚。在打印页面中，会显示自定义的页眉和页脚内容。

4. 运行结果

当我们将上面的示例代码保存为 HTML 文件，并在浏览器中打开打印预览时，会看到如下结果：

在每一页的顶部中央会显示 “Print Page Header” 作为页眉内容；
在每一页的底部中央会显示 “Page {page} of {pages}” ，用于显示当前页码以及总页数。

通过这样的设置，我们可以在打印页面中显示自定义的页眉和页脚内容，帮助用户更方便地查看打印内容。

三、总结

通过上面的介绍，我们了解了如何使用 CSS 来控制打印页面的眉脚内容。通过 @media print 媒体查询和 @page 规则，我们可以实现自定义打印页面的眉脚样式，并在打印页面中显示自定义的信息。

在实际的网页开发中，为了提升打印页面的用户体验，我们可以根据实际需求来设置打印页面的眉脚内容，比如添加打印日期、打印标题、作者信息等，以及调整眉脚的位置和样式，使打印页面看起来更加美观和方便阅读。

CSS page 打印眉脚