CSS打印HTML的页脚内容|极客教程

CSS打印HTML的页脚内容

在网页打印的过程中，页脚内容是非常重要的一部分，它可以包括页码、版权信息、打印时间等内容。通过CSS样式表，我们可以实现在每一页的底部显示相同的页脚内容。本文将详细介绍如何使用CSS样式表实现在每页显示相同的页脚内容。

CSS打印样式

在网页打印的过程中，我们可以通过@media print媒体查询来定义打印时的样式。以下是一个示例的CSS样式表，用来定义打印时的页脚内容：

@media print {
  footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 10pt;
    padding: 10px 0;
    border-top: 1px solid #333;
  }
}

在上面的CSS代码中，我们使用@media print来指定打印时的样式。我们给footer元素定义了固定的位置，使其始终位于页面底部。通过设置bottom: 0来确保页脚内容始终显示在每页的底部。我们还设置了文本居中对齐、字体大小、内边距和上边框以增强打印页脚内容的可读性。

页面结构

为了演示如何在每页显示相同的页脚内容，我们需要一个简单的HTML页面结构。以下是一个示例的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Print Page Footer</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
  <h1>Print Page Footer</h1>
</header>
<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies turpis vel libero aliquam, vel viverra lorem consectetur.</p>
</main>
<footer>
  Page Footer Content
</footer>
</body>
</html>

在上面的HTML代码中，我们定义了一个简单的页面结构，包括页眉、主要内容和页脚。页脚中包含了一个示例的页脚内容。