当前位置:首页 > 建站分享 > 正文内容

html css print打印,打印样式

lujun2年前 (2023-01-04)建站分享743



默认打印效果如上,分别表示日期,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>




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

参考 https://ask.csdn.net/questions/7459014

扫描二维码推送至手机访问。

版权声明:本文由5020工作室发布,如需转载请注明出处。

本文链接:http://5020.work/?id=53

分享给朋友:

相关文章

分享10个可免费使用的网站CDN加速服务

分享10个可免费使用的网站CDN加速服务

CDN也称内容分发网络,其原理大概是将服务内容分发至全网加速节点,让用户从就近的服务器节点上获取内容,从而提高网站的访问速度。大部分服务商(如阿里云,网易蜂巢,京东云等)的CDN服务是按使用量收费的,也有一些服务商提供免费的CDN服务,本文...

为网页添加动态背景 (背景轮播)

以前文章 最近发现一个插件所以重新更新下本文插件名称: jquery.backstretch.js下面是 示例代码:设置网页背景<!doctype html><html lang="...

html5 让video支持m3u8播放

我在网上查了半天,也测试了几个,但是最终我选择的是hls.jshls.js Git#git:https://github.com/video-dev/hls.js基本使用#<script src="https://...

关于jsDelivr开源免费CDN加速服务国内访问异常的解决方法

关于jsDelivr开源免费CDN加速服务国内访问异常的解决方法

jsDelivr无法访问解决方法2022年5月中旬左右国内最大的免费cdn网络分发加速,jsDelivr出现了无法访问的情况,大概率是域名cdn.jsdelivr.net被墙了,现在jsDelivr已经启用了临时备用域名,已经调用了远程js...

M3U8文件和TS切片加了Referer验证的PHP代理示例

M3U8文件和TS切片加了Referer验证的PHP代理示例

主要使用 PHP 进行流量转发,需要消耗自己 PHP 服务器的带宽和流量。链接例子:https://rtmlive06.secureswiftcontent.com/rtmchannel/06-manifest.m3u8坛友一(kof97z...

文件外链网站推荐catbox

前言前几天看到一个国外网站非常有意思,它就是猫箱(译名),原名catbox猫箱:https://catbox.moe/猫箱catbox这是一个文件外链网站,就是上传一个文件,可以获得它的直链地址,别人访问这个地址就能获取文件内容比如大家想要...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。