@page { @top-right { content: "Page " counter(page) " of " counter(pages); } }
这是我发现将页码显示为“第5页,共10页”的唯一方法.但它似乎没有起作用.我在一个简单的HTML页面中尝试过,但它没有用.
我想使用普通的html / css在页面的任何位置显示页码.
有没有人成功让它发挥作用？如果是这样,我感谢您的支持.
解决方法
>然后,再说两句话,你说：“我想在页面的任何位置显示页码”.
首先,指出第二点.
无法将页码放入HTML网站本身.此功能仅适用于分页媒体,例如PDF或从HTML创建的打印输出.
因此,它仅适用于PDF或打印输出.但即便如此：也无法将页码放在PDF或打印页面的任意位置.您唯一的选择是顶部和底部左/右/中心边距框,主页上没有任何地方.
第二,第一点.
现在将页码信息放入这些可能的位置……
既然你没有详细说明你的设置究竟不起作用,那么让我给你一个简介：
创建一个文件my.css并将以下内容放入其中(这不是您的问题所需的最低要求,但为您提供了一些更好的实验).
另外,首先我将解释如何将它与PrinceXML一起使用.
@page { size: A4 landscape;
background: gray;
border: solid 1pt blue;
padding: 9pt;
margin: 18pt 18pt 18pt 18pt;
font-family: "Helvetica Narrow";
@top-left {
content: 'PrivateCopy';
color: red;
font-style: bolditalic;
}
@top {
content: string(doctitle);
}
@bottom-left {
content: 'My Super-Duper Manual';
font-style: bold;
}
@top-right {
content: "Page " counter(page) " of " counter(pages);
font-style: bold;
}
@bottom {
content: string(paratitle);
}
}
将文件保存在磁盘上的某个位置.
现在调用PrinceXML命令行并使用-s my.css来应用样式表：
prince \
--verbose \
--javascript \
--style=/path/to/my.css \
https://stackoverflow.com/questions/12061835/css-page-counter \
--output=my-css-page-counter-question.pdf
(显然,你需要调整my.css样式表文件的路径.但是……)Voila !,你的Stackoverflow问题在PDF中……
当然,您可以使用更多功能扩展my.css.当然,您可以将它用于HTML文件的任何转换,甚至是与远程文件混合的本地文件：
prince \ --verbose \ --javascript \ -s /path/to/my.css \ /home/nada.adly/Documents/title.html \ /home/nada.adly/Documents/chapter_1.html \ /home/nada.adly/Documents/chapter_2.html \ http://en.wikipedia.org/wiki/Cascading_Style_Sheets \ https://stackoverflow.com/questions/tagged/css \ -o random.pdf
现在除了使用PrinceXML之外还使用CSS,并用于直接打印输出. (当然你可以随时打印PrinceXML生成的PDF – 但也许你根本不想使用Prince？)
同样,您不清楚问题的范围：
>作为浏览器用户,您是否希望将这些页码放入您可能执行的任何网站打印输出中？
>或者,作为负责网站的网站管理员,您是否希望确保这些网页编号进入您网站访问者的内容打印输出？
我不会在这里阐述这两点中的任何一点(因为我可能完全忽略了你的观点),但……
> …您应该谷歌搜索’用户样式表’和’print.css’以找出存储此CSS代码的确切位置(因为用户样式表位置因浏览器而异);> … CSS代码对于两个目的中的任何一个(网站管理员的样式表或用户样式表)都是相同的.
