头闻号

义乌市美时化妆品有限公司

眼影|粉底|睫毛膏|眉笔|眼线笔、眼线液|美容材料及用具

首页 > 新闻中心 > 科技常识:用CSS创建打印页面的具体步骤
科技常识:用CSS创建打印页面的具体步骤
发布时间:2024-12-23 19:44:25        浏览次数:1        返回列表

今天小编跟大家讲解下有关用CSS创建打印页面的具体步骤 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关用CSS创建打印页面的具体步骤 的相关资料,希望小伙伴们看了有所帮助。

用CSS创建打印页面 不必为打印而专门建立一个HTML文件 可以节省一些体力 其前提是按“WEB标准”用CSS+DIV布局HTML页面。 第一、在HTML页面加入为打印机设置的CSS文件 复制代码代码如下: <link href="https://www.aidi.net.cn//css/css/admin.css"rel="stylesheet"type="text/css"media="screen"/> <link href="https://www.aidi.net.cn//css/css/admin-print.css"rel="stylesheet"type="text/css"media="print"/> media="screen" 是面向屏幕的; media="print" 是面向打印的; 第二、建立打印版本的页面 去除不必要的页面元素 如导航、侧栏、广告、版权等。这时就可以体现出按“WEB标准”做页面的优势了 用CSS换个版式很容易。 复制代码代码如下: h1 span { display: none; } #sidebar { display: none; } #content td.ads { display: none; } #content th.col2 span { display: none; } #content #bottom-2 { display: none; } 第三、打印按钮函数 IE、Firefox均可正常打印。 复制代码代码如下: <input type=button value="打 印 本 页"onclick="window.print()"> 另外 还有一个本地版的打印页面 可以进行“打印设置”和“打印预览” 但因为此设置 网络打印需要调用IE浏览器一个控件 还需降低ActiveX控件安全 且只能在IE上运行 不实用。所以只贴一下调用代码 备份。 复制代码代码如下: <OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 width=0> </OBJECT> <input type=button value="打印预览"onclick=document.all.WebBrowser.ExecWB(7,1)> <input type=button value="页面设置"onclick=document.all.WebBrowser.ExecWB(8,1)> <input type=button value="打印本页"onclick=document.all.WebBrowser.ExecWB(6,1)> 第四、注意事项 在打印样式中 打印字体大小是以点(pt)来计的 屏幕上字体大小显示 象素(px)比点和英尺更合适。 在打印样式中 CSS的float属性有时可能会引起一些麻烦 会造成打印页面缺失 所以尽量去除不必要块级显示。 关于打印设置 自定义页眉、页脚 我查阅了一番资料 对此CSS和HTML无法控制 只能通过调用ActiveX控件来实现 但是这样做不安全。最好方法是 打印前 你自己点击浏览器菜单进行打印设置。 CSS中还有一个可以设置分页符的标签:“page-break-after”和“page-break-before”。因为我的节日页面 表格较多 所以就没有应用这个CSS 具体效果你自己试验吧。

来源:爱蒂网