css3 @page
Posted geovindu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css3 @page相关的知识，希望对你有一定的参考价值。
<!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,.bottomdisplay: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>
以上是关于css3 @page的主要内容，如果未能解决你的问题，请参考以下文章