当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 打印网页中不打印页面中的某些内容

CSS样式表
关于CSS控制DIV水平居中问题
CSS:相同元素不同结构重复定义的问题
关于DIV CSS和XHTML CSS的理解
CSS教程:简单理解em
CSS教程:导致一些问题的overflow
CSS常用属性的代码简化实例
CSS教程:总结清除浮动的方法
网页设计中典型的header代码结构
CSS初学者常犯错误汇总
CSS网页布局:div水平居中的各种方法
CSS Div网页布局中的结构与表现
CSS教程:简化CSS中属性的示例
CSS网页布局:div垂直居中的各种方法
acronym标记和abbr标记的不同之处
CSS编写的网页打开流畅相关知识与注意点
你知道CSS中长度单位pt、px、dpi的意思吗?
CSS页面布局中HTML结构化
CSS选择器的使用技巧
CSS教程:网页图片垂直居中的使用技巧
dl,dt,dd标记在网页中要充分利用

CSS样式表 中的 打印网页中不打印页面中的某些内容


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 43 ::
收藏到网摘: n/a

其实很简单,用一个CSS就可以实现了,这个方法同时支持IE和FF。
HTML内容
XML/HTML Code复制内容到剪贴板
       
  1. <HTML>    
  2.    
  3.   <HEAD>    
  4.    
  5.     <TITLE>Test Print</TITLE>    
  6.    
  7.     <STYLE type="text/css">    
  8.    
  9.         .css1 {    
  10.    
  11.             text-align: center;    
  12.    
  13.             text-align: center;    
  14.    
  15.             height: 250;    
  16.    
  17.             width: 400;    
  18.    
  19.             background-color: blue;    
  20.    
  21.         }    
  22.    
  23.         .css2 {    
  24.    
  25.             text-align: center;    
  26.    
  27.             height: 250;    
  28.    
  29.             width: 400;    
  30.    
  31.             background-color: red;    
  32.    
  33.         }    
  34.    
  35.         @media print {    
  36.    
  37.             .printbtn, .css1 {    
  38.    
  39.                 display: none;    
  40.    
  41.             }    
  42.    
  43.         }    
  44.    
  45.     </STYLE>    
  46.    
  47.   </HEAD>    
  48.    
  49.   <BODY>    
  50.    
  51.     <DIV class="printbtn"><INPUT type="button" value="Print" onclick="window.print()"/> Print button can't print out, But it can display in page.</DIV>    
  52.    
  53.     <DIV class="css1"><BR/><BR/><BR/>Not print out</DIV>    
  54.    
  55.     <DIV class="css2"><BR/><BR/><BR/>Print out</DIV>    
  56.    
  57.   </BODY>    
  58.    
  59. </HTML>  

主要是在于CSS @media print,这个定义了打印时引用的CSS。css1定义了display: none;,所以打印时css1的类型不会被打印。