<!doctype html> <html> <head> <Meta charset="utf-8"> <title>print Geovin Du</title> <style type="text/css" media="screen"> /* https://www.w3.org/TR/css-page-3/ https://developer.mozilla.org/en-US/docs/Web/CSS/:first https://dev.opera.com/articles/ https://www.quackit.com/css/at-rules/css_page_at-rule.cfm https://developers.google.com/web/tools/chrome-devtools/css/ 涂聚文 注：Firefox,Safari,Internet Explorer,Google Chrome,Opera 是默认的页眉是网页title 页脚：是第几页/共几页. 只有Microsoft Edge没有默认的页眉，页脚 */ /*应用于Microsoft edge*/ .heade,.bottom{display:none;} </style> <style type="text/css" media="print"> /*每一页 如果没有另外自定义的话 */ @page {margin-left: 50px; margin-top: 100px;} /*第一页*/ @page :first { margin-left: 50%; margin-top: 50%; } /*分页标记*/ .geovindu{ page-break-after: always; } .heade {margin-top: 10px;} </style> </head> <body> <script type="text/javascript"> document.querySelector("button").onclick = function () { window.print(); } </script> <div id="geovindu" class="geovindu"> <div class="heade">页眉：涂家村</div> <div class="conent"> First Page. </div> <div class="bottom">第一页</div> </div> <div id="geovindu" class="geovindu"> <div class="heade">页眉：涂家村</div> <div class="conent"> Second Page. </div> <div class="bottom">第二页</div> </div> <button>Print!</button> </body> </html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
