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

CSS样式表
CSS样式表定义标签li前面样式
符合标准的div css制作的弹出菜单
CSS实现在文章每段后面加入带连接的隐藏文字
CSS:浏览器特定选择器介绍
WEB标准学习,认识两种网页声明的含义
CSS样式表中继承关系的空格与不空格
CSS框架的利与弊(下)
让广告代码不影响网页站打开速度
CSS教程:position 绝对定位的问题
标签增加CSS的overflow属性来清除浮动
跨浏览器的CSS固定定位
IE7对css选择器的改进
IE7新支持的CSS属性和属性选择符
CSS设计符合Web标准的网页表单的几个技巧
HTML网页中无刷新的更换CSS样式
CSS定义网页局部链接的技巧
关于学习DIV CSS的一些精妙问答
论web标准的网页制作和符合web标准的网站UI
CSS学习者:2008年不要作浮躁的人
学习CSS布局网页的一些实例

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


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