html css print打印，打印样式
默认打印效果如上，分别表示日期，html标题，文件路径和页码。
1：去除默认页眉页脚
要删除页脚，只需要设置页边距。
@page {
margin: 20px;
}
2：分页
您可以使用足够的内容来散布用于分页的内容，也可以使用page-break-before进行强制分页显示。
例如，我希望每个h1标签的内容都显示在新页面上。
h1 {
page-break-before: always;
}
<body>
<h1>HI</h1>
<h1>HELLO</h1>
<h2>tao</h2>
</body>
3：自定义页眉页脚
根据打印规则，具有固定位置（固定）的元素将显示在每页上。
根据此原理，我们可以自定义和设置页眉和页脚。当然，我们上面提到的方法也可以实现。
创建一个
h1 {
page-break-before: always;
}
nav{
color: red;
position: fixed;
top: 0;
}
<body>
<nav>自定义页头</nav>
<h1>HI</h1>
<h1>HELLO</h1>
<h2>tao</h2>
</body>
可以根据自己的喜好随意修改内容。
footer{
color: red;
position: fixed;
bottom: 0;
}
<body>
<nav>自定义页头</nav>
<h1>HI</h1>
<h1>HELLO</h1>
<h2>tao</h2>
<footer>自定义页脚</footer>
</body>
4：单独设置打印样式
很多时候我们不想在打印时显示相关内容，如何实现？
我们可以使用 media print 属性来单独设置相关样式。
@media print {
h2 {
display: none;
}
}
<body>
<nav>自定义页头</nav>
<h1>HI</h1>
<h1>HELLO</h1>
<h2>tao</h2>
<footer>自定义页脚</footer>
</body>
这对您有帮助，请记住喜欢并关注哦。
1418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
