html css print打印,打印样式

html css print打印,打印样式

文章目录

  • html css print打印,打印样式
    • 1:去除默认页眉页脚
    • 2:分页
    • 3:自定义页眉页脚
    • 4:单独设置打印样式

html css print打印,打印样式_第1张图片

默认打印效果如上,分别表示日期,html标题,文件路径和页码。

1:去除默认页眉页脚

要删除页脚,只需要设置页边距。

        @page {
     
            margin: 20px;
        }

html css print打印,打印样式_第2张图片

2:分页

您可以使用足够的内容来散布用于分页的内容,也可以使用page-break-before进行强制分页显示。

例如,我希望每个h1标签的内容都显示在新页面上。

        h1 {
     
            page-break-before: always;
        }
		<body>
		    <h1>HIh1>
		    <h1>HELLOh1>
		    <h2>taoh2>
		body>

html css print打印,打印样式_第3张图片

3:自定义页眉页脚

根据打印规则,具有固定位置(固定)的元素将显示在每页上。

根据此原理,我们可以自定义和设置页眉和页脚。当然,我们上面提到的方法也可以实现。

创建一个

        h1 {
     
            page-break-before: always;
        }
        nav{
     
            color: red;
            position: fixed;
            top: 0;
        }
		<body>
		    <nav>自定义页头nav>
		    <h1>HIh1>
		    <h1>HELLOh1>
		    <h2>taoh2>
		body>

html css print打印,打印样式_第4张图片

可以根据自己的喜好随意修改内容。

        footer{
     
            color: red;
            position: fixed;
            bottom: 0;
        }
		<body>
		    <nav>自定义页头nav>
		    <h1>HIh1>
		    <h1>HELLOh1>
		    <h2>taoh2>
		    <footer>自定义页脚footer>
		body>

html css print打印,打印样式_第5张图片

4:单独设置打印样式

很多时候我们不想在打印时显示相关内容,如何实现?

我们可以使用 media print 属性来单独设置相关样式。

        @media print {
     
            h2 {
     
                display: none;
            }
        }
		<body>
		    <nav>自定义页头nav>
		    <h1>HIh1>
		    <h1>HELLOh1>
		    <h2>taoh2>
		    <footer>自定义页脚footer>
		body>

html css print打印,打印样式_第6张图片
html css print打印,打印样式_第7张图片

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

你可能感兴趣的:(css,css,html)