用于打印的CSS和HTML书

好吧，假设我想说我只想用HTML和CSS编写一本书。我将如何去定义一个页眉和页脚（并在页脚中有页码）？我怎样才能做到这一点，以便页面中断和边距显示在浏览器中（如预览模式）？用于打印的CSS和HTML书

我知道这听起来像我要求某人为我写代码，但我真的只需要为这样的资源指示方向。我只是完全停留在我甚至会开始做这样的事情上。

解释我想要在浏览器中显示的内容;我希望能够看到每个网页的小版本，就像您在PDF查看器，基本上是文字溢出将创建一个分页：

Thumbnails

我已经调查@media打印，但没有任何创建页眉和页脚的钩子。

，我不能得到这个（从w3.org）工作：

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

我从Boom!看了看代码，这对于印刷好的，但它不能在浏览器相同的显示。

因此......现在有人能在这里找到一个好的起点吗？

来源

2012-07-04 Charles John Thompson III

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

基本上，您可以为每本书的页面制作一个.htm页面，并通过链接严格链接，当您完成时，每个页面的屏幕截图，保存缩略图，并制作另一个html页面，这个页面最终将包含在本书的所有其他页面中（如链接中的教程所示）。

UPDATE

关于分页符，你可以让DIV-S相同类别和风格的页面，如图here

来源

2012-07-04 13:38:11 menislici

问题是我不想使用大量的HTML，我只想让文本溢出到下一页，如果它比当前页面更长。当我想以不同的页面尺寸打印时会发生什么？ –

我不确定你的分页符显示的是什么......除非我正在开始新章节，否则我不想定义/编写分页符。 –

这也是我可能会用新章节标题定义一个新标题。 –

这是我的解决方案：

<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-04 13:47:32

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

因为如果有任何代码背后，那么它是一个不同的故事。

定义一个具有class="page"的主div。里面定义了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-04 13:48:43 Narendra

虽然我不想重复任何代码来定义一个新页面，特别是因为我不一定会在一张纸上打印这本书。 –

我希望使用分页符的唯一时间是它是否为新章节，因为章节应始终在新页面上开始。 –

请告诉我，如果你想使用任何代码隐藏或不？至少你必须使用JavaScript。否则，只能使用HTML和CSS，只能分页，而不能使用页眉和页脚。 – Narendra

用于打印的CSS和HTML书

回答

相关问题