是否可以使用 HTML 和/或 CSS 的任意组合在第一个标题上显示一个标题printed页面然后显示不同的每个后续的标题printed页?我知道关于@media print
CSS 标记仅在打印站点时显示某些内容,但这并不能让我在多个页面上拥有不同的标题。
任何帮助表示赞赏,谢谢!
十二年后我可以回答你的问题:)
以下是在第一个打印页面上显示与后续页面不同的标题的解决方案:
@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"> </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"> </div>
</td>
</tr>
</tfoot>
</table>
<!-- Repeated Footer -->
<footer class="footer">
<p>
Text footer
</p>
</footer>
<button onclick="window.print()">Test Here</button>
</body>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)