我的位置: 首页 >> 新 闻 >> 行业资讯

利用CSS设计适合打印的网页

制作适合打印的网页时,往往需要调整网页的显示方式。例如,取消背景翻色,将白色的文字变为黑色的文字,去掉一些图片、动画效果,去掉广告栏、导向菜单栏,将所有的链接加上下划线,对于具有滚动条的方框内容取滑滚动条等。我们可以通过定义一个适合打印的外部样式表,然后设置其media选项,有效地达到这一效果。具体操作步骤如下如下

(1)在html的head元素中,插入一行定义外部样式表的语句。如下:

css代码
"stylesheet"type="text/css"href="print.css"media="print">

在缺省情况下,media的属性值是screen,表示所定义的外部样式表是用于屏幕显示的,如果设置为print,则表示该外部样式表是用于打印的。有关link元素的media属性的其他设置,可以参见w3c标准:


(2)新建一个css的文本文件,例如文件名为print.css,然后将需要修改的样式表内容写在里面。一般说来,有以下修改:

①取消背景颜色,将白色的文字变为黑色的文字。

css代码
body{color:#000000:background:#ffffff}

②将所有的链接加上下划线并且变为蓝色字体。

css代码
a{text-decoration:underlinecolor:#0000ff}

③去掉一些图片、动画效果、去掉广告栏、导向菜单栏。首先为这些内容的元索分别定义标识,例如:

xml/html代码
<divid="navigation">...div>
<divid="advertising">...div>
<divid="other">...div>

然后定义样式表如下:

css代码
#navigation,#advertising,#other{display:none}

对于具有滚动条的方框内容取消滚动条。例如,有一个宽度为200px、高度为300px的div元素,当里面的内容很多时,屏幕就会显示垂直滚动条。

xml/html代码
<divid="scrollbox">...div>

屏幕显示时的样式表为:

css代码
#scrollbox{width:200pxheight:300pxoverflow:auto}

那么,在print.css中加入下述语句就可以了。

css代码
#scrollbox{width:200pxheight:auto}

客户中心

版权2005-2020    聚卓网络有限公司    电话:18589057325    QQ:2338754269   粤ICP备14021702号

地址:深圳市宝安区 37区龙井一路100号 新乐社区工作站办公大楼侧门6楼(近翻身路、新乐社区健康服务中心)

技术支持: 网站建设