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

CSS样式表
CSS定位中Positoin、absolute、Relative的一些研究
脚本控制三行三列自适应高度DIV布局的代码
word-wrap在firefox中不起作用的解决方法
网页设计者需要了解的_网页字体大小数据参考
div+css与xhtml+css分别是什么意思?
xhtml+css网页制作中常见问题解决方法
表格标签table深入了解
DIV+CSS网页另类上下布局的实例代码
CSS实现每行新闻数量不等效果代码
JAVASCRIPT IE 与 FF 中兼容写法记录
让超出DIV宽度范围的文字自动显示省略号...
CSS使用学习总结
解决IE6 3像素Bug的css写法
用CSS控制表格或单元格强制换行,防止表格被英文单词或中文撑大
firefox margin-top失效的原因与解决办法
IE hack条件写法
css pointer控制在firefox下显示手型的代码
纯CSS实现上下左右都居中的代码
在DW中CSS编码需要注意和掌握的一些技巧
DIV CSS网页布局 最小高度(min-height)的妙用

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 129 ::
收藏到网摘: 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的类型不会被打印。