html css print打印，打印样式

本文链接：https://blog.csdn.net/qq_41974199/article/details/113406601

html css print打印，打印样式

文章目录

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>

在这里插入图片描述

这对您有帮助，请记住喜欢并关注哦。