网页打印格式设置总结

作者：wasw100
网址：http://www.wasw100.com/html_js_css/page_print_summary.html

 

 1.分页符的添加

 

.page_break{
	page-break-after:always;
}

 分页的时候加上：<div class="page_break"></div>

 

2.为使各个浏览器显示效果尽量一致，加上

 

*{
	margin:0;
	padding:0;
}

 

3.A4纵向打印，浏览器显示和打印效果相差不大，设置body的宽度

 

body{
	width:640px;
	font-size:12px;
}

 

 

4.css擅长样式的控制，table善于格式的显示。css修饰table

参考文章：http://www.w3schools.com/css/css_table.asp

table添加边框

 

table{
	border-collapse:collapse;
}
table, th, td{
	border:1px solid #000000;
}

 如果一个页面有多个table，这个table和其他table格式略有不同，可以使用下面的方法

 

<div id="t1">
  <table>
    <tr>
      <th scope="col">&nbsp;</th>
    </tr>
  </table>
</div>

 css中，控制不同的格式

 

#t1 table{
	width:640px;
}
#t1 table,#t1 th,#t1 td{
	text-align:center;
}

 

 5.控制打印时是否显示

 

@media print{<!--控制哪些打印，哪些不打印的样式-->            
  .print   {display:block;}      
  .notPrint {display:none;}      
}

 我们在html中引入css： <link rel="stylesheet" type="text/css" media="screen" href="styles/basic.css" />

 media="screen"，也可以时media="print"，分别代表控制浏览器里面的格式，或者打印时的格式，如果没有写media属性，则表示css既控制浏览器显示，有控制打印显示，

 

所以上面的css就是单独控制打印的

 

-- 文字间距 行间距

.space{
	word-spacing:20px;
	letter-spacing:20px;
	line-height:60px;
}

 

 

 

 

--EOF--