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

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

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

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

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

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

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

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

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

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