網頁打印格式設置總結

作者：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--