HTML CSS将页面限制为A4 - CSS

当我们需要打印HTML页面时，我们常常需要将页面进行格式限制以适应A4纸张大小。使用CSS可以很容易地将页面限制为A4大小，并且我们还可以添加页眉、页脚和页数作为额外的功能。

使用CSS将页面限制为A4大小

要将HTML页面限制为A4大小，我们需要使用以下CSS代码：

@media print {
  html, body {
    width:210mm;
    height:297mm;
    margin:0;
  }
  * {
    box-sizing:border-box;
  }
  .page {
    page-break-after: always;
  }
}

这会将页面宽度设置为210mm，高度设置为297mm（即A4纸张大小），并且将所有元素的盒模型设置为border-box以确保页面在打印时不会发生布局问题。使用 .page 类可以在每个页面的末尾添加一个分页符。

添加页眉和页脚

使用CSS，我们还可以很容易地为打印页面添加页眉和页脚。以下代码片段演示如何添加页眉和页脚：

@media print {
  ...
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 20mm;
    background-color: #f2f2f2;
    padding: 10px;
    text-align: center;
    font-size: 12pt;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15mm;
    background-color: #f2f2f2;
    padding: 5px;
    text-align: center;
    font-size: 10pt;
  }
}

我们使用 .header 和 .footer 类分别创建了页眉和页脚。我们将position设置为fixed以确保它们在打印页面上保持位置固定。我们还设置了top和bottom属性以确保它们出现在页面顶部和底部。设置height属性可以更改页眉和页脚的高度。我们还可以更改文本的文本内容、颜色和大小。

添加页数

最后，我们还可以使用CSS为打印页面添加页码。我们使用以下代码将页码添加到页脚：

@media print {
  ...
  .page:after {
    content: "Page " counter(page) " of " counter(pages);
  }
}

我们在 .page:after 中使用content属性为每个页面添加了一个 after 元素。我们使用 counter(page) 和 counter(pages) CSS函数来显示当前页码和总页数。这使我们可以为打印页面添加页码，使它们更具可读性和专业性。

总结

使用CSS，我们可以将HTML页面格式限制为A4大小，并添加页眉、页脚和页码等功能。此外，我们还可以使用CSS更改文本颜色、大小、对齐方式和排版等内容，添加满足我们业务需求的其他格式。