我的编程空间,编程开发者的网络收藏夹
学习永远不晚

CSS中怎么创建一个打印页面

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

CSS中怎么创建一个打印页面

本篇文章为大家展示了CSS中怎么创建一个打印页面,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。


第一、在HTML页面加入为打印机设置的CSS文件

代码如下:


<link href="css/admin.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/admin-print.css" rel="stylesheet" type="text/css" media="print" />


media="screen" ,是面向屏幕的;

media="print" ,是面向打印的;
第二、建立打印版本的页面,去除不必要的页面元素,如导航、侧栏、广告、版权等。这时就可以体现出按“WEB标准”做页面的优势了,用CSS换个版式很容易。

代码如下:



h2 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,具体效果你自己试验吧。

上述内容就是CSS中怎么创建一个打印页面,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

CSS中怎么创建一个打印页面

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么在python中创建一个操作页面

这篇文章给大家介绍怎么在python中创建一个操作页面,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。python可以做什么Python是一种编程语言,内置了许多有效的工具,Python几乎无所不能,该语言通俗易懂、容易
2023-06-14

如何在 Java 中打印 HTML 页面?(java怎么打印html页面)

在Java编程中,打印HTML页面是一个常见的需求。以下是详细的步骤来实现这一目标:一、准备工作确保你已经安装了Java开发环境(JDK),并且设置好了环境变量。你可以在命令提示符或终端中输入
如何在 Java 中打印 HTML 页面?(java怎么打印html页面)
Java2024-12-18

Dreamvear中怎么创建一个html5网页

这篇文章给大家介绍Dreamvear中怎么创建一个html5网页,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。步骤首先打开自己的电脑,运行Dreamvear软件。软件打开后,出现如图的界面,然后选择中间一排的更多选项。
2023-06-08

怎么在Android中使用TextInputLayout创建一个登陆页面

怎么在Android中使用TextInputLayout创建一个登陆页面?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1. 实现 TextInputLayout第一步: 创
2023-05-30

使用ASP.NET怎么创建一个网站web页面

使用ASP.NET怎么创建一个网站web页面?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。创建网站1.从网上下载VS2017,我接触的朋友和公司大多数都是使用VS2017/VS
2023-06-14

如何使用HTML和CSS创建一个幻灯片布局页面

引言:幻灯片布局在现代web设计中被广泛使用,在展示信息或图片时具有很大的吸引力和交互性。本文将介绍如何使用HTML和CSS创建一个幻灯片布局页面,并提供具体的代码示例。一、HTML布局结构首先,我们需要创建一个HTML布局结构,包含一个幻
2023-10-21

如何使用HTML和CSS创建一个卡片式布局页面

如何使用HTML和CSS创建一个卡片式布局页面在网页设计中,卡片式布局已经成为了一种非常流行的设计趋势。它以卡片的形式展示信息,使得页面看起来整洁、直观,并且易于浏览。在本文中,我将向大家介绍如何使用HTML和CSS来创建一个简单的卡片式布
2023-10-27

Python中怎么创建一个命令行界面

这篇文章将为大家详细讲解有关Python中怎么创建一个命令行界面,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。通过创建命令行界面(CLI),可以使程序功能强大并具有交互性。CLI允许您接受命
2023-06-16

ASP.NET Core中的Razor页面怎么创建

这篇文章主要介绍“ASP.NET Core中的Razor页面怎么创建”,在日常操作中,相信很多人在ASP.NET Core中的Razor页面怎么创建问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”ASP.NET
2023-06-29

在Word中打印一个包含文档信息的其他页面

要在Word中打印包含文档信息的其他页面,您可以按照以下步骤操作:1. 打开Word文档。2. 在文档的顶部,选择“插入”选项卡。3. 在“插入”选项卡中,找到“页码”组。4. 单击“页码”组中的“页脚”按钮,然后从下拉菜单中选择“页脚”选
2023-09-08

如何使用HTML和CSS创建一个响应式产品展示页面

随着移动设备的普及,响应式网页设计已成为现代网页设计的重要要求。产品展示页面作为企业或个人网站中的一个重要组成部分,同样需要具备响应式设计的特点。本文将详细介绍如何使用HTML和CSS创建一个响应式产品展示页面,并提供具体的代码示例。首先,
2023-10-21

如何使用HTML和CSS创建一个响应式卡片布局页面

在当今移动设备普及的时代,响应式设计成为了网页设计的重要手段之一。而卡片布局则是一种非常常用的设计方式,可以将内容以卡片的形式呈现,直观明了。本文将介绍如何使用HTML和CSS创建一个响应式卡片布局页面,并给出具体的代码示例。首先,我们需要
2023-10-21

word中a4怎么打印成a3左右对开页面

本篇内容主要讲解“word中a4怎么打印成a3左右对开页面”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“word中a4怎么打印成a3左右对开页面”吧!word中a4打印成a3左右对开的方法:1、
2023-07-01

Python中怎么创建一个Shell

本篇文章给大家分享的是有关Python中怎么创建一个Shell,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。基础知识让我们从一个类开始。这是一个简单的方法,将其初始化参数保存到
2023-06-15

编程热搜

目录