关于网页打印的一些问题

做网站这么久,第一次遇到要打印网页的客户,遇到了不少问题,主要出在打印上,最大的问题就是背景图片和背景颜色,打印预览的时候显示不出来。非要用图片的形式才能解决这个问题,但是要用图片,那么图片上的文字又不好排,只能用定位的方法,如下:

文字放在图片上面只能用绝对定位的方法了:
样式表:

#img_div {
width:960px;
height:40px;
position:relative;
font-size:0px;
}

#text_div {
top:0px;
left:0px;
width:200px;
height:20px;
font-size:12px;
position:absolute;
}

HTML代码:
<div id="img_div">
<img src="图片路径" />
<div id="text_div">文字内容</div>
</div>

还有一种方法是通过定义一个打印的样式,那么打印网页时会自动调用这个样式。
HTML代码中加入以下代码,注意红色的字,这是专门针对打印的样式。
<link type="text/css" rel="stylesheet" media="print" href="../css/print.css" />

再在print.css样式表中定义要打印的样式。如:
#topbar,#sidebar-first,#footlinks{
display: none;
visibility: hidden;
}

#main{
border-top: 1px solid #8A211B;
border-bottom: 1px solid #8A211B;
padding-top:1em;
padding-bottom:2em;
}

#content-wrapper,#content{
width: auto;
clear:both;
float: none;
}

#footer{
clear: both;
padding-top: .5em;
margin: .5em auto;
}

body{
font-size: medium;
background: none;
font-family: "宋体","Times New Roman", Times, serif;
}
legend{
font-weight: bold;
}
.print-link{
visibility: hidden;
}

具体操作根据自己定义的层名称来。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值