复印网页页面中不复印网页页面中的一些內容

日期:2021-03-15 类型:科技新闻 

关键词:快速建站,网站建设系统,免费网页建站,网站免费建设,建站系统

实际上很简易,用1个CSS便可以完成了,这个方式另外适用IE和FF。
HTML內容
XML/HTML Code拷贝內容到剪贴板
  1. <HTML>    
  2.   <HEAD>    
  3.     <TITLE>Test Print</TITLE>    
  4.     <STYLE type="text/css">    
  5.         .css1 {    
  6.             text-align: center;    
  7.             text-align: center;    
  8.             height: 250;    
  9.             width: 400;    
  10.             background-color: blue;    
  11.         }    
  12.         .css2 {    
  13.             text-align: center;    
  14.             height: 250;    
  15.             width: 400;    
  16.             background-color: red;    
  17.         }    
  18.         @media print {    
  19.             .printbtn, .css1 {    
  20.                 display: none;    
  21.             }    
  22.         }    
  23.     </STYLE>    
  24.   </HEAD>    
  25.   <BODY>    
  26.     <DIV class="printbtn"><INPUT type="button" value="Print" onclick="window.print()"/> Print button can't print out, But it can display in page.</DIV>    
  27.     <DIV class="css1"><BR/><BR/><BR/>Not print out</DIV>    
  28.     <DIV class="css2"><BR/><BR/><BR/>Print out</DIV>    
  29.   </BODY>    
  30. </HTML>  

关键是在于CSS @media print,这个界定了复印时引入的CSS。css1界定了display: none;,因此复印时css1的种类不容易挨打印。
上一篇:CSS 3栏等高合理布局完成方式 返回下一篇:没有了