打印html时在页面上打印页码
我已经阅读了很多关于打印页码的网站，但是当我尝试打印时，仍然无法将它显示在我的html页面上。
所以CSS代码是下一个：
@page { margin: 10%; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } } 我试图把这个页面规则放在里面
@media all { *CSS code* }
在它外面，试图把它放在@media print ，但没有什么帮助我在页面上显示页码。 我试过使用FireFox和Chrome（基于WebKit，正如你所知）。 我认为这个问题是在我的HTML或CSS代码。
有人可以告诉我一个在多个页面的大html页面中实现这个@page规则的例子吗？ 我只需要html页面的代码和css文件的代码，这是可行的。
PS我有最新的浏览器支持版本。
由于现在我正在寻找替代品，页面pageNumbers现在不能在浏览器中工作。
我find了奥利弗·科尔 （ Oliver Kohll）发表的答案 。
我会在这里重新发布，这样每个人都可以更轻松地find它：
对于这个答案，我们不使用@page ，这是一个纯CSS的答案，但在火狐20 +版本的工作。 这是一个例子的链接 。
CSS是：
#content { display: table; } #pageFooter { display: table-footer-group; } #pageFooter:after { counter-increment: page; content: counter(page); }
而HTML代码是：
<div id="content"> <div id="pageFooter">Page </div> multi-page content here... </div>
这样，您可以通过编辑#pageFooter的参数来自定义页码 。 我的例子：
#pageFooter:after { counter-increment: page; content:"Page " counter(page); left: 0; top: 100%; white-space: nowrap; z-index: 20px; -moz-border-radius: 5px; -moz-box-shadow: 0px 0px 4px #222; background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); }
这个技巧对我很好。 希望它会帮助你。
你可以试试这个，你可以使用content: counter(page);
@page { @bottom-left { content: counter(page) "/" counter(pages); } }
参考： http : //www.w3.org/TR/CSS21/generate.html#counters
这是你想要的：
@page { @bottom-right { content: counter(page) " of " counter(pages); } }
