CSS 打印模式下的页眉/页脚（Print header/footer on all pages）

在本文中，我们将介绍如何使用CSS在打印模式下添加页眉和页脚，并在所有打印页面上显示。

阅读更多：CSS 教程

1. 创建基本的打印样式表

首先，我们需要创建一个用于打印的样式表。可以在<head>标签中使用<link>标签引用该样式表，或者直接在<style>标签中定义。以下是一个简单的示例：

<style media="print">
  @page {
    size: A4;
    margin: 2cm;
  }
</style>

在上述示例中，我们使用了media="print"属性来指定该样式仅在打印模式下生效。然后，使用@page规则来定义页面的大小和页边距。这里我们将页面大小设置为A4，页边距为2cm。根据实际需求可以进行调整。

在接下来的步骤中，我们将使用这个打印样式表来添加页眉和页脚。

2. 添加页眉和页脚

2.1 添加固定内容的页眉和页脚

让我们首先添加一个固定的内容页眉和页脚。例如，我们想在每一页的页眉显示公司名称，并在每一页的页脚显示页面编号。

<style media="print">
  @page {
    size: A4;
    margin: 2cm;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: lightgray;
    text-align: center;
  }

  footer {
    position: fixed;
    bottom: -2cm;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: lightgray;
    text-align: center;
  }
</style>

<header>
  <h1>公司名称</h1>
</header>

<footer>
  <p>Page <span class="page-number"></span></p>
</footer>

在上述示例中，我们首先定义了header和footer元素的样式。这里我们将它们的position属性设置为fixed，使其固定在页面的顶部和底部。

header元素的top属性设置为0，left属性设置为0，right属性设置为0，这样可以使它横向充满整个页面。高度设置为2cm，并设置了背景色和居中对齐。

footer元素的bottom属性设置为-2cm，这样可以将其固定在页面的底部。其他属性的设置和header相似。

接下来，我们在header元素中添加了一个<h1>标签，用于显示公司名称。在footer元素中的<p>标签中，我们添加了一个类名为page-number的<span>元素，用于显示页面编号。

2.2 添加动态内容的页眉和页脚

除了固定内容的页眉和页脚，我们还可以添加一些动态内容，例如当前日期和时间。下面是一个示例：

<style media="print">
  @page {
    size: A4;
    margin: 2cm;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: lightgray;
    text-align: center;
  }

  footer {
    position: fixed;
    bottom: -2cm;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: lightgray;
    text-align: center;
  }
</style>

<script>
  function getDate() {
    var date = new Date();
    return date.toDateString();
  }

  function getTime() {
    var date = new Date();
    return date.toLocaleTimeString();
  }
</script>

<header>
  <h1>公司名称</h1>
</header>

<footer>
  <p>Page <span class="page-number"></span> | Date: <span id="current-date"></span> | Time: <span id="current-time"></span></p>
</footer>

<script>
  document.getElementById('current-date').innerText = getDate();
  document.getElementById('current-time').innerText = getTime();
</script>

在上述示例中，我们首先添加了一个<script>标签，其中定义了两个函数getDate和getTime。这些函数用于获取当前日期和时间。

然后，在页脚的内容中使用了两个<span>元素来显示当前日期和时间。我们通过给这两个<span>元素设置id属性，然后通过JavaScript代码将日期和时间填充进去。

3. 自定义页眉和页脚的样式

我们还可以对页眉和页脚进行自定义样式。例如，将页眉和页脚的背景色改为灰色，字体颜色改为白色，并添加一些边框和阴影效果。下面是一个示例：

<style media="print">
  @page {
    size: A4;
    margin: 2cm;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: gray;
    color: white;
    text-align: center;
    border-bottom: 1px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }

  footer {
    position: fixed;
    bottom: -2cm;
    left: 0;
    right: 0;
    height: 2cm;
    background-color: gray;
    color: white;
    text-align: center;
    border-top: 1px solid white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  }
</style>

在上述示例中，我们对header和footer元素的背景色、字体颜色、边框和阴影效果进行了自定义。你可以根据自己的需求进行修改。