4

好的，假设我想写一本书只使用 HTML 和 CSS。我将如何定义页眉和页脚（并在页脚中有页码）？以及如何使分页符和边距显示在浏览器中（如预览模式）？

我知道这听起来像是我在要求某人为我编写代码，但我真的只需要为这样的事情提供资源方向。我只是完全坚持我什至会开始做这样的事情。

解释我想在浏览器中显示的内容；我希望能够像在 PDF 查看器中一样查看每个页面的小版本，基本上文本溢出会创建分页符：

缩略图

我研究了@media print，但它没有任何用于创建页眉和页脚的钩子。

我无法让它工作（来自w3.org）：

title { position: running(header) }
@page { @top-center {
  content: element(header) }
}

我看过Boom 的代码！, 而且打印效果很好，但在浏览器中显示的效果不一样。

那么......现在有没有人可以/应该为此寻找一个好的起点？

4

3 回答 3

3

这是我的解决方案：

<div id='document'>
    <div class='page'>
        <div class='header'></div>
        <div class='footer'></div>
        <div class='content'></div>
    </div>
</div>

一切都进去了<div id='document'>。对于每个.page，.header、.footer和.content具有页面的正确高度和宽度。

之后，我使用 JavaScript 删除了所有溢出到div.content. 然后我克隆div.page，更新了新页面标题内的页码<div>，并填充了新页面的内容<div>。

重复此操作，直到我有 100 页，并且最后一页的内容没有突出<div>。

于 2012-07-04T13:47:32.127 回答
1

我假设您使用的是纯 HTML，并且后面没有代码。

因为如果背后有任何代码，那就是另一回事了。

定义一个主 div 具有class="page". 在里面为页眉、内容和页脚定义了 3 个 div。

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Give margin as per your requirement.*/
}

.header {
   display: block;
   height: 50px;
}


.content {
   display: block:
   height: 700px;
}

.footer {
   display: block;
   height: 50px;
}

根据您的要求添加其他样式。

使用媒体类型=“打印”创建另一个样式表

为页面添加以下样式。

.page {
   display: block;
   height: 800px; 
   width: 100%;
   /*Give margin as per your requirement.*/
    /* this will print the page in new paper*/
   page-break-after: always;
}

一页的 HTML 看起来像这样

<div class="page">
  <div class="header">HEADER CONTENT</div>
  <div class="content"> MAIN PAGE'S CONTENT</div>
  <div class="footer"></div>
</div>

根据您需要的页数重复上述代码。

您也可以为此目的使用表格布局。

如果你使用后面的代码，那么内容可以动态生成。

希望这可以帮助。

于 2012-07-04T13:48:43.290 回答
0

好吧，它可以通过纯 HTML 和 CSS 来完成，但绝对不是要走的路，因为每次你想开始一个新页面时，重复几乎相同的代码块会变得非常令人沮丧。对于像左面板这样的 PDF，您可以使用 iframe，更多信息在这里

基本上，你会为你的书的每一页制作一个 .htm 页面，通过链接严格链接在一起，当你完成后，你可以对你制作的每一页进行截图，保存缩略图，然后制作另一个 html 页面将是面板，最终将包含在本书的所有其他页面中（如我链接中的教程所示）。

更新

关于分页符，您可以使用相同的类制作 div-s，并将样式设置为页面，如下所示

于 2012-07-04T13:38:11.710 回答