打印网页中不打印页面中的某些内容

当前位置 : 首页 > 网页制作 > CSS > 打印网页中不打印页面中的某些内容

打印网页中不打印页面中的某些内容

来源: 作者: 时间:2015-12-07 14:04
其实很简单,用一个CSS就可以实现了,这个方法同时支持IE和FF。 HTML内容 XML/HTML Code复制内容到剪贴板 TestPrint&
其实很简单,用一个CSS就可以实现了,这个方法同时支持IE和FF。 HTML内容 XML/HTML Code复制内容到剪贴板                 Test Print&</div> <div id="con_all"> <div id="con_ad1"></div> <div id="con_ad8"></div> </div> 其实很简单,用一个CSS就可以实现了,这个方法同时支持IE和FF。 <br/>HTML内容 <br/> <div class="codeText"> <div class="codeHead"><span class="lantxt">XML/HTML Code</span><span class="copyCodeText" style="CURSOR: pointer" onclick="copyIdText('code_3519')">复制内容到剪贴板</span></div> <div id="code_3519"> <ol class="dp-xml"> <li class="alt"><span><span class="tag"><</span><span class="tag-name">HTML</span><span class="tag">></span><span>    </span></span> </li> <li class=""><span>  </span><span class="tag"><</span><span class="tag-name">HEAD</span><span class="tag">></span><span>    </span> </li> <li class="alt"><span>    </span><span class="tag"><</span><span class="tag-name">TITLE</span><span class="tag">></span><span>Test Print</span><span class="tag"></</span><span class="tag-name">TITLE</span><span class="tag">></span><span>    </span> </li> <li class=""><span>    </span><span class="tag"><</span><span class="tag-name">STYLE</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"text/<a href='http://www.js-code.com/CSS/' target='_blank'><u>css</u></a>"</span><span class="tag">></span><span>    </span> </li> <li class="alt"><span>        .css1 {    </span> </li> <li class=""><span>            text-align: center;    </span> </li> <li class="alt"><span>            text-align: center;    </span> </li> <li class=""><span>            height: 250;    </span> </li> <li class="alt"><span>            width: 400;    </span> </li> <li class=""><span>            background-color: blue;    </span> </li> <li class="alt"><span>        }    </span> </li> <li class=""><span>        .css2 {    </span> </li> <li class="alt"><span>            text-align: center;    </span> </li> <li class=""><span>            height: 250;    </span> </li> <li class="alt"><span>            width: 400;    </span> </li> <li class=""><span>            background-color: red;    </span> </li> <li class="alt"><span>        }    </span> </li> <li class=""><span>        @media print {    </span> </li> <li class="alt"><span>            .printbtn, .css1 {    </span> </li> <li class=""><span>                display: none;    </span> </li> <li class="alt"><span>            }    </span> </li> <li class=""><span>        }    </span> </li> <li class="alt"><span>    </span><span class="tag"></</span><span class="tag-name">STYLE</span><span class="tag">></span><span>    </span> </li> <li class=""><span>  </span><span class="tag"></</span><span class="tag-name">HEAD</span><span class="tag">></span><span>    </span> </li> <li class="alt"><span>  </span><span class="tag"><</span><span class="tag-name">BODY</span><span class="tag">></span><span>    </span> </li> <li class=""><span>    </span><span class="tag"><</span><span class="tag-name">DIV</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"printbtn"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">INPUT</span><span> </span><span class="attribute">type</span><span>=</span><span class="attribute-value">"button"</span><span> </span><span class="attribute">value</span><span>=</span><span class="attribute-value">"Print"</span><span> </span><span class="attribute">onclick</span><span>=</span><span class="attribute-value">"window.print()"</span><span class="tag">/></span><span> Print button can't print out, But it can display in page.</span><span class="tag"></</span><span class="tag-name">DIV</span><span class="tag">></span><span>    </span> </li> <li class="alt"><span>    </span><span class="tag"><</span><span class="tag-name">DIV</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"css1"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">BR</span><span class="tag">/></span><span class="tag"><</span><span class="tag-name">BR</span><span class="tag">/></span><span class="tag"><</span><span class="tag-name">BR</span><span class="tag">/></span><span>Not print out</span><span class="tag"></</span><span class="tag-name">DIV</span><span class="tag">></span><span>    </span> </li> <li class=""><span>    </span><span class="tag"><</span><span class="tag-name">DIV</span><span> </span><span class="attribute">class</span><span>=</span><span class="attribute-value">"css2"</span><span class="tag">></span><span class="tag"><</span><span class="tag-name">BR</span><span class="tag">/></span><span class="tag"><</span><span class="tag-name">BR</span><span class="tag">/></span><span class="tag"><</span><span class="tag-name">BR</span><span class="tag">/></span><span>Print out</span><span class="tag"></</span><span class="tag-name">DIV</span><span class="tag">></span><span>    </span> </li> <li class="alt"><span>  </span><span class="tag"></</span><span class="tag-name">BODY</span><span class="tag">></span><span>    </span> </li> <li class=""><span></span><span class="tag"></</span><span class="tag-name">HTML</span><span class="tag">></span><span>  </span> </li> </ol> </div> </div> <br/>主要是在于CSS @media print,这个定义了打印时引用的CSS。css1定义了display: none;,所以打印时css1的类型不会被打印。 </div> <div class="articlead" id="art580"></div> <div class="articlead" id="art580"></div> <div class="tag"> Tag: </div> <script src="/js/bdshare.js"></script> <div class="actbar"> <span>[<a href="javascript:addBookmark(document.title,document.location.href)" class="button_link">收藏</a>]</span> <span>[<a title="复制本文链接发给你QQ/MSN上的好友" href="javascript: copyUserHomeToClipBoard()" rel="nofollow" class="button_link">复制链接发给好友</a>]</span> <span>[<a href="#" onclick="window.print();">打印</a>]</span> <span>[<a href="javascript:closeWindow()" class="button_link">关闭</a>]</span> </div> <div class="context"> <div>本文链接:<div>本文链接:<a href="http://www.js-code.com/CSS/20151207_31838.html">http://www.js-code.com/CSS/20151207_31838.html</a></div></div> 上一篇:<a href='http://www.js-code.com/CSS/20151207_31837.html'>去掉点击链接时周围的虚线框outline属性</a> <br> 下一篇:<a href='http://www.js-code.com/CSS/20151207_31839.html'>CSS 优先级 详细分析</a> </div> <div class="floatclear"> </div> </div> <div id="relatedarticle"> <h2>相关文章</h2> <ul> </ul> </div> <div class="clear"></div> <div class="art_bot_ad"> <script type="text/javascript"> /*内容底部960*60 创建于 2015-06-02*/ var cpro_id = "u2134094"; </script> <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script> </div> <div id="hm_t_64154"></div> <div class="comment"> <div class="pltitle"><strong>网友评论</strong></div> <div class="ds-thread" data-category="" data-thread-key="292722" data-title="打印网页中不打印页面中的某些内容" data-author-key="" data-url="http://www.js-code.com/CSS/20151207_31838.html" id="ds-thread"><div class='_DEDECY' style=''></div> </div> </div> </div> </div> <div class="pright"> <div class="rlist2"> <div class="rbox2"></div> </div> <div class="classbox margintop"> <dl> <dt>相关栏目</dt> <dd> <ul> <li><a target="_blank" href='http://www.js-code.com/HTML_Xhtml/list_24_1.html' title="HTML/Xhtml">HTML/Xhtml</a> </li> <li><a target="_blank" href='http://www.js-code.com/html5/list_25_1.html' title="html5">html5</a> </li> <li><a target="_blank" href='http://www.js-code.com/CSS/list_26_1.html' title="CSS">CSS</a> </li> <li><a target="_blank" href='http://www.js-code.com/XML_XSLT/list_27_1.html' title="XML/XSLT">XML/XSLT</a> </li> <li><a target="_blank" href='http://www.js-code.com/Dreamweaver/list_28_1.html' title="Dreamweaver教程">Dreamweaver教程</a> </li> <li><a target="_blank" href='http://www.js-code.com/Frontpage/list_30_1.html' title="Frontpage教程">Frontpage教程</a> </li> <li><a target="_blank" href='http://www.js-code.com/xindejiqiao/list_31_1.html' title="心得技巧">心得技巧</a> </li> </ul> </dd> </dl> </div> <div class="rlist" id="r_1"></div> <div class="rlist margintop"> <div class="title">最近更新</div> <div class="rbox"> <ul> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61802.html" title="不使用Ajax框架实现Ajax效果?">不使用Ajax框架实现Ajax效果?</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61803.html" title="关于css中出现的bug以及修复方法">关于css中出现的bug以及修复方法</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61804.html" title="30佳灵感来自大自然的网页设计作品欣赏">30佳灵感来自大自然的网页设计作品欣赏</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61805.html" title="谈谈我从事web前端设计对div绝对定位的心得">谈谈我从事web前端设计对div绝对定位的心得</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61806.html" title="创建更好的HTML5">创建更好的HTML5</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61807.html" title="细微之处:比较两种CSS清除浮动的兼容">细微之处:比较两种CSS清除浮动的兼容</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61797.html" title="教您如何使用WebMatrix创建第一个网页">教您如何使用WebMatrix创建第一个网页</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61798.html" title="Step by Step WebMatrix网站开发之二:使用WebMatri">Step by Step WebMatrix网站开发之二:使用WebMatri</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61799.html" title="HTML5之表单详解">HTML5之表单详解</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61800.html" title="HTML 5的革新:结构之美">HTML 5的革新:结构之美</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61801.html" title="利用label标签和CSS美化文件上传表单(不兼容">利用label标签和CSS美化文件上传表单(不兼容</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61793.html" title="Tomcat7 StuckThreadDetectionValve 功能分析">Tomcat7 StuckThreadDetectionValve 功能分析</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61794.html" title="储海洋:从网站的架构设计看用户体验的重要">储海洋:从网站的架构设计看用户体验的重要</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61795.html" title="新手必看的PHP学习方法和PHP经验分享">新手必看的PHP学习方法和PHP经验分享</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20160321_61796.html" title="如何安装和使用微软全新开发工具WebMatrix">如何安装和使用微软全新开发工具WebMatrix</a></li> </ul> </div> </div> <div class="rlist margintop"> <div class="rbox" id="bd200"></div> </div> <div class="rlist margintop"> <div class="title">热点关注</div> <div class="rbox"> <ul> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3665.html" title="CSS3教程:background-clip和background-origin">CSS3教程:background-clip和background-origin</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3649.html" title="CSS高级技巧:圆角矩形">CSS高级技巧:圆角矩形</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3670.html" title="CSS盒模型制定网页的宽度和高度的原理">CSS盒模型制定网页的宽度和高度的原理</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150916_4358.html" title="利用锚点制作简单索引效果【CSSdemo】">利用锚点制作简单索引效果【CSSdemo】</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3663.html" title="Web标准:关于web标准的一些初学的知识">Web标准:关于web标准的一些初学的知识</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3646.html" title="Web前端开发的Firefox插件">Web前端开发的Firefox插件</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150612_394.html" title="CSS设计之页面滚动条出现时防止页面跳动的方">CSS设计之页面滚动条出现时防止页面跳动的方</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150916_4356.html" title="网页版的页面分享">网页版的页面分享</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3671.html" title="细说CSS3中的选择符">细说CSS3中的选择符</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3656.html" title="IE8.0Beta比较不错的功能:WebSlices">IE8.0Beta比较不错的功能:WebSlices</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3662.html" title="优化CSS在网页中的加载方式">优化CSS在网页中的加载方式</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3664.html" title="css中用javascript判断浏览器版本">css中用javascript判断浏览器版本</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3668.html" title="CSS教程:使用ul进行网页的多列布局">CSS教程:使用ul进行网页的多列布局</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150612_392.html" title="举例详解CSS中的cursor属性">举例详解CSS中的cursor属性</a></li> <li><a target="_blank" href="http://www.js-code.com/CSS/20150823_3652.html" title="CSS高级技巧:滑动门技术">CSS高级技巧:滑动门技术</a></li> </ul> </div> </div> <div class="rlist margintop"> <script charset="gbk" src="http://p.tanx.com/ex?i=mm_45993749_16618988_61768133"></script></div> </div> </div> </div>  <div class="blank3"></div> <div id="footer"> <div id="footerinfo"> <div id="footercontent"> <a target="_blank" title="关于我们" href="http://www.js-code.com/guanyuwomen/index.html">  关于我们</a><a target="_blank" title="广告合作" href="http://www.js-code.com/guanggaohezuo/index.html">  广告合作</a><a target="_blank" title="联系我们" href="http://www.js-code.com/lianxiwomen/index.html">  联系我们</a><a target="_blank" title="免责声明" href="http://www.js-code.com/mianzeshengming/index.html">  免责声明</a><a target="_blank" title="网站地图" href="http://www.js-code.com/wangzhanditu/index.html">  网站地图</a><a target="_blank" title="投诉建议" href="http://www.js-code.com/tousujianyi/index.html">  投诉建议</a><a target="_blank" title="在线投稿" href="http://www.js-code.com/zaixiantougao/index.html">  在线投稿</a> </div> <div id="footercopyrights">严禁网站镜像,否则追究法律责任 CopyRight © 2015-2016 <a href="http://www.js-code.com" target="_blank" title="脚本宝典">脚本宝典</a> www.js-code.com , All Rights Reserved.<a href="http://www.js-code.com/sitemap.xml">XML地图</a><a href="http://www.js-code.com/sitemap.txt">网站地图</a> </div> <div class="qinfo"><a href="http://www.miitbeian.gov.cn" rel=nofollow target="_blank">豫ICP备15014364号</a> QQ交流群:277859234</div> <DIV class=ewm></DIV> <div class="zz"></div> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//hm.baidu.com/hm.js?124599b5ebf1f0bbd5925fe51fb3886d"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <<script src='http://www.js-code.com/plus/abc_js.php?aid=39' language='javascript'></script> </body> </html>