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

CSS样式表
跨浏览器的CSS3产生器:CSS3 please
YUICompressor:高效压缩CSS和JS代码的工具
收集国外47个令人瞠目结舌的CSS3动画演示
CSS教程:通配属性批量替换的方法
清理无用的CSS样式比较有用的几个工具
页面元素的对齐:阅读线路不清晰
15个滑动门效果CSS网页导航菜单设计教程
网页制作教程:弹出层详解
SEO实战:网页排名效果最好的标题写法
提高网站权重:提高网站PR和提高网站更新度
兼容浏览器的网页细线表格设计
CSS教程:CSS3新功能和新特性
CSS3模块的目前的状况
ie6普及的大环境下暂时不要考虑w3c标准
CSS技巧教程:让CSS代码更具有易维护性
控制first-letter伪类的背景

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


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