gpt4 book ai didi

html - CSS @page 不适用于打印 html 页面的更新页眉和页脚

转载 作者:行者123 更新时间:2023-12-04 17:33:27 25 4
gpt4 key购买 nike

我尝试了以下代码。在 CSS 中使用打印媒体更新打印页面内的页眉和页脚的代码目的

body {counter-reset: chapter;}
div.chapter {counter-increment: chapter;}
@page {
margin: 10%;
@top-center { content: "Chapter" counter(chapter) }
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css"/ media="print">
</head>
<body>
<header></header>
<div id="pageHeader">
<p>This is the Header shown on first page.</p>
</div>
<div id="pageFooter">
<p>This is the footer shown on last page.</p>
</div>
<section class="page">

<h1>Introduction</h1>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>

<p>
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:

</p>
<p>The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:
The margins can be set as displayed in the examples above, or can be set for each side individually, as shown in the code snippet below, where the top and bottom margins are set to 2cm, and the left and right margins are set to 3cm:</p>


</section>


</body>
</html>

以下网址是我试过代码的地方 https://www.quackit.com/css/at-rules/css_bottom-center_at-rule.cfm https://www.w3.org/TR/css-page-3/#cascading-and-page-context

但是当我打印它时,它应用来自@page 规则的边距,但不会根据其他定义规则更新页眉和页脚中的内容。我附上了下图,它显示了用于更改特定代码区域的规则 enter image description here

但是当我打印其他@rules 时,除了@page( set margin correct) 之外不起作用

enter image description here

我想使用下面的 css @rule 更新打印页面中的突出显示区域

  • @bottom-center
  • @左下角
  • @右下角

最佳答案

根据屏幕截图页边距中的日期和 URL,您似乎正在使用桌面网络浏览器的“打印”功能。遗憾none of them support CSS page-margin boxes (such as @top-center) at the moment .

如果您想自己生成 PDF 文件或纸质副本,请考虑使用专用于打印渲染的工具,例如:

  • WeasyPrint (免责声明:我已经研究过这个)
  • Prince
  • (还有其他人,但我也不认识)

如果您正在制作一个网站并想控制其他人的网络浏览器如何打印它,恐怕您就不走运了。

关于html - CSS @page 不适用于打印 html 页面的更新页眉和页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57710321/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com