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

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

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

　　實(shí)現(xiàn)這一功能最簡(jiǎn)單的方法是使用TABLE。然而，你的格式化的輸出必須包括單獨(dú)的行，而且它們不能超過(guò)打印頁(yè)面的高度。此外，你的TABLE一定不能超過(guò)打印頁(yè)面的寬度。由于你無(wú)法控制風(fēng)景畫(huà)或者肖像畫(huà)，所以你必須進(jìn)行一些假設(shè)。你要假定文檔的方向是肖像畫(huà)，左右邊距是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、無(wú)邊界。在表格的頂端，你要?jiǎng)?chuàng)建兩個(gè)隱藏的DIV，它們將作為頁(yè)首和頁(yè)腳。DIV有設(shè)定好的寬度和高度，overflow樣式屬性被設(shè)置為hidden(隱藏)。這就為你的輸出打下了基礎(chǔ)。為了創(chuàng)建換頁(yè)符、頁(yè)首和頁(yè)腳，你必須在page load后面加入一些JavaScript。

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

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

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

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

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

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