其实很简单,用一个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> </section> <div class="row"> <ul class="list-group"> <li class="list-group-item list-group-item-success">本文链接:<a href="http://www.js-code.com/CSS/20151207_31838.html">http://www.js-code.com/CSS/20151207_31838.html</a></li> <li class="list-group-item list-group-item-info">上一篇:<a href='http://www.js-code.com/CSS/20151207_31837.html'>去掉点击链接时周围的虚线框outline属性</a> </li> <li class="list-group-item list-group-item-warning">下一篇:<a href='http://www.js-code.com/CSS/20151207_31839.html'>CSS 优先级 详细分析</a> </li> <li class="list-group-item list-group-item-danger">分享给好友: <script src="/js/bdshare.js"></script> </li> </ul> <ul class="list-group"> <a href="#" class="list-group-item disabled">相关文章</a> </ul> </div> </article> </div> <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"> <div class="list-group"><a href="http://www.js-code.com/CSS/" class="list-group-item active"> <h2>CSS</h2> </a> <a href="http://www.js-code.com/HTML_Xhtml/" title="HTML/Xhtml" class="list-group-item"><h3>HTML/Xhtml</h3></a> <a href="http://www.js-code.com/html5/" title="html5" class="list-group-item"><h3>html5</h3></a> <a href="http://www.js-code.com/CSS/" title="CSS" class="list-group-item"><h3>CSS</h3></a> <a href="http://www.js-code.com/XML_XSLT/" title="XML/XSLT" class="list-group-item"><h3>XML/XSLT</h3></a> <a href="http://www.js-code.com/Dreamweaver/" title="Dreamweaver教程" class="list-group-item"><h3>Dreamweaver教程</h3></a> <a href="http://www.js-code.com/Frontpage/" title="Frontpage教程" class="list-group-item"><h3>Frontpage教程</h3></a> <a href="http://www.js-code.com/xindejiqiao/" title="心得技巧" class="list-group-item"><h3>心得技巧</h3></a> </div> <ul class="list-group hidden-xs"> <a href="#" class="list-group-item disabled">最新文章</a> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61802.html" target="_blank" title="不使用Ajax框架实现Ajax效果">不使用Ajax框架实现Ajax效果</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61803.html" target="_blank" title="关于css中出现的bug以及修复">关于css中出现的bug以及修复</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61804.html" target="_blank" title="30佳灵感来自大自然的网页">30佳灵感来自大自然的网页</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61805.html" target="_blank" title="谈谈我从事web前端设计对">谈谈我从事web前端设计对</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61806.html" target="_blank" title="创建更好的HTML5">创建更好的HTML5</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61807.html" target="_blank" title="细微之处:比较两种CSS清除">细微之处:比较两种CSS清除</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61797.html" target="_blank" title="教您如何使用WebMatrix创建第">教您如何使用WebMatrix创建第</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61798.html" target="_blank" title="Step by Step WebMatrix网站开发之">Step by Step WebMatrix网站开发之</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61799.html" target="_blank" title="HTML5之表单详解">HTML5之表单详解</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61800.html" target="_blank" title="HTML 5的革新:结构之美">HTML 5的革新:结构之美</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61801.html" target="_blank" title="利用label标签和CSS美化文件">利用label标签和CSS美化文件</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61793.html" target="_blank" title="Tomcat7 StuckThreadDetectionValve">Tomcat7 StuckThreadDetectionValve</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61794.html" target="_blank" title="储海洋:从网站的架构设计">储海洋:从网站的架构设计</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61795.html" target="_blank" title="新手必看的PHP学习方法和">新手必看的PHP学习方法和</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><a href="http://www.js-code.com/CSS/20160321_61796.html" target="_blank" title="如何安装和使用微软全新开">如何安装和使用微软全新开</a><span class="pull-right">2016-03-21</span></li> <li class="list-group-item"><script type="text/javascript"> /*300*250 创建于 2017/5/15*/ var cpro_id = "u2979648"; </script> <script type="text/javascript" src="http://cpro.baidustatic.com/cpro/ui/c.js"></script> </li> </ul> </div> </div> </section> <div class="clear"></div> <footer> <div class="copyright"> <div class="container"> <div class="row"> <div class="col-sm-12"> <span>严禁网站镜像,否则追究法律责任 Copyright<a href="http://www.js-code.com">脚本宝典 www.js-code.com</a></span> | <span><a href="http://www.miitbeian.gov.cn" rel="nofollow" target="_blank">豫ICP备15014364号</a></span> <div><span><a href="http://www.js-code.com/sitemap.xml">XML地图</a></span><span><a href="http://www.js-code.com/sitemap.txt">网站地图</a></span>欢迎交换友情链接 联系QQ: 384754419</div> </div> </div> </div> </div> <script type=\"text/javascript\"> /*移动端悬浮20:3 创建于 2017/5/15*/ var cpro_id = \"u2979668\"; </script> <script type=\"text/javascript\" src=\"http://cpro.baidustatic.com/cpro/ui/cm.js\"></script> </footer> <!--百度统计--> <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> <!--google tj--> <!--bdts--> <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>