技術在進步，思維在發(fā)展，網頁上的花樣當然也要一天天地趕時髦了。在“滾動字符”、“跑馬燈”已成平常的今天，網頁上還能變出新花樣嗎?是的,今天就跟小編一起來學習如何利用樣式動態(tài)創(chuàng)建頁首、頁腳和換頁符,感興趣否?

　　在仔細閱讀一個討論區(qū)的時候，我讀到了一個開發(fā)人員提出的問題，他正在努力編程在HTML頁面里自動創(chuàng)建頁首和頁腳并插入換頁符。這還沒有去考慮你的輸出會是什么，因為弄清瀏覽器對空白、頁面大小等的當前設置很難。然而，如果確實想要強制指定寬度和換頁符，你也可以實現(xiàn)。

　　實現(xiàn)這一目的的一種方法是使用TABLE。在本文里，我將向你演示如何把頁首和頁腳動態(tài)地插到頁面里，從而構成格式化的頁面。(請注意：這里我使用IE 6.0來測試代碼。它也可以在5.0和更高版本的瀏覽器上使用，因為我使用了從IE 5.0以來STYLE元素都可以使用的@media偽類。)

　　實現(xiàn)這一功能最簡單的方法是使用TABLE。然而，你的格式化的輸出必須包括單獨的行，而且它們不能超過打印頁面的高度。此外，你的TABLE一定不能超過打印頁面的寬度。由于你無法控制風景畫或者肖像畫，所以你必須進行一些假設。你要假定文檔的方向是肖像畫，左右邊距是1"(2.54厘米)，上下邊距0.25"(0.64厘米)，紙張的大小是8.5"(21.59厘米)X 11"(27.94厘米)。這就意味著輸出的總寬度是6.5"(16.51厘米)，所以你的TABLE寬度應該被設置為6.5in、無邊界。在表格的頂端，你要創(chuàng)建兩個隱藏的DIV，它們將作為頁首和頁腳。DIV有設定好的寬度和高度，overflow樣式屬性被設置為hidden(隱藏)。這就為你的輸出打下了基礎。為了創(chuàng)建換頁符、頁首和頁腳，你必須在page load后面加入一些JavaScript。

　　創(chuàng)建格式化輸出的想法是把頁首和頁腳DIVS復制到隱藏的行里。但是，你要把@media print的顯示樣式設置為inline。而且，你要把頁首之前的TR的page-break-after樣式屬性設置為always。

　　在BODY onload事件期間，在所有的行里迭代，以確定行的offsetTop加上offsetHeight是否超過了頁面可用的長度。可用長度是頁面的長度減去頁首、頁腳、上下空白的總高度。所以，如果頁首的高度和頁腳的高度都是1”，那么上下的空白就是0.25"，頁面的長度是11"，那么可用的寬度就是8.5"：11 - (1 x 2) - (0.25 x 2) = 8.5。

　　下面就是實現(xiàn)這一任務的HTML代碼：

　　在查看上面的示例代碼時，你會注意到頁首和頁腳是兩個放在TABLE元素前面的DIV。TABLE tbl1包含多個TR。每一行都被標識為t1，以便使用all集合幫助在它們中間迭代。這個例子只能用于超過兩行的頁面。我創(chuàng)建了一個hdrftr，用來識別這些項目應該在什么時候顯示。JavaScript代碼則詳細敘述了這個功能是如何被創(chuàng)建的。

　　首先，一個頁首行被加到表格的頂端。然后，每個行都會被檢查，以確定top坐標加上行的高度加上頁腳的高度——1in * screen.deviceYDPI或者僅僅screen.deviceYDPI——達到或者超過可用的總高度。如果這個值符合可用的高度，那么當前的行就被設置為后面有一個換頁符。如果這個值超過了可用高度，那么就會在前一行后面設置換頁符。然后，相關的行后面就會加入一個頁腳，而頁腳后面接著就是頁首。這一過程一直持續(xù)到所有的行都被檢查到。最后，一個頁腳行被加到表格的末端。頁腳行包括有絕對位置，以防止瀏覽器無意中分頁，而這可能會導致錯誤發(fā)生。而且，后面的每個頁面都必須為我們另外添加的頁首行做好準備：(頁面 – 1)* 1，這里(頁面 – 1)是后面的頁面數，而1是頁首的高度。

　　上文中小編向你演示如何把頁首和頁腳動態(tài)地插到頁面里，從而構成格式化的頁面。你學會了嗎?