用於打印的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書

回答

相關問題