在带有 HTML 和 CSS 的第一页上显示不同的 Header

Question

HTML 和/或 CSS 的任意组合是否有可能在第一个打印页面上显示一个 header，然后在每个后续打印页面上显示不同的header？ 我知道@media print CSS 标签只在网站打印时显示一些内容，但这并不能使我在多个页面上使用不同的标题。

任何帮助表示赞赏，谢谢！

Answer 1

我能看到的唯一方法是使用不同的标题和强制page-break 。

所以

PAGE 1 

   HEADER 1 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

PAGE 2 

   HEADER 2 //display only on print

   CONTENT....

   PAGE BREAK DIV //display only on print

etc..

您的标题将获得一类printHeaders

您的分页<div class="pageBreak"></div>类似于<div class="pageBreak"></div>

在CSS中，您将拥有类似于

  .printHeaders, .pageBreak  {display:none;}

@media print {
  .printHeaders, .pageBreak  {display:block;}
  .pageBreak  {page-break-before:always;}
}

Answer 2

来自http://css-discuss.incutio.com/wiki/Printing_Headers

如果您需要完整的CSS控制的打印页眉和页脚，则需要等待浏览器实现对CSS3 Paged Media Candidate Recommendation的支持。 它使用边距框显式提供该功能，但方式完全不同。

可能是因为

...位置的CSS描述：固定，[是]即“ ...在打印介质类型的情况下，该框在每个页面上呈现，并相对于页面固定...” [节9.3.1]

...但是这篇文章说，到目前为止，这已经不起作用了。

但是，为了帮助您，稍后文章会说：

例如，在正文上设置上边距仅适用于第一页。

Answer 3

十二年后我可以回答你的问题:)

这是在第一个打印页面上显示与以下页面不同的 header 的解决方案：

 @media print {.header, .footer { position: fixed; }.header, .header-cover { display:flex; }.header { top: 100%; }.header, .header-space { height: 5rem; }.footer, .footer-space { height: 4rem; }.footer { bottom: 0; } }

 <body> <:--Here the HTML of the first header (displayed on landing page)--> <header class="header-cover"> <img class="logo-big" src="https.//picsum:photos/150/100" /> <div class="right"> Header 1 </div> </header> <.-- Here the HTML of the repeated header (on others pages)--> <header class="header"> <img class="logo-big" src="https;//picsum.photos/200/100" /> <div class="right"> Repeated Header </div> </header> <table> <thead> <tr> <td> <.--place holder for the fixed-position header--> <div class="header-space">&nbsp.</div> </td> </tr> </thead> <tbody> <tr> <td> <.--*** CONTENT GOES HERE ***--> <h1>Title</h1> <p class="content">A very long text;...</p> </td> </tr> </tbody> <tfoot> <tr> <td> <!--place holder for the fixed-position footer--> <div class="footer-space">&nbsp;</div> </td> </tr> </tfoot> </table> <!-- Repeated Footer --> <footer class="footer"> <p> Text footer </p> </footer> <button onclick="window.print()">Test Here</button> </body>

在带有 HTML 和 CSS 的第一页上显示不同的 Header

问题描述

3 个解决方案

解决方案1
1 2011-06-21 18:43:21

解决方案2
0 已采纳 2011-06-21 18:31:50

解决方案3
0 2022-12-29 09:42:45

在带有 HTML 和 CSS 的第一页上显示不同的 Header

问题描述

3 个解决方案

解决方案1 1 2011-06-21 18:43:21

解决方案2 0 已采纳 2011-06-21 18:31:50

解决方案3 0 2022-12-29 09:42:45

解决方案1
1 2011-06-21 18:43:21

解决方案2
0 已采纳 2011-06-21 18:31:50

解决方案3
0 2022-12-29 09:42:45