做网站这么久,第一次遇到要打印网页的客户,遇到了不少问题,主要出在打印上,最大的问题就是背景图片和背景颜色,打印预览的时候显示不出来。非要用图片的形式才能解决这个问题,但是要用图片,那么图片上的文字又不好排,只能用定位的方法,如下:
文字放在图片上面只能用绝对定位的方法了:
样式表:
#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;
}
具体操作根据自己定义的层名称来。