當(dāng)前位置：軟件學(xué)堂 > 資訊首頁 > 網(wǎng)絡(luò)編程 > 編程其他 > JS實(shí)現(xiàn)頁面隨窗口的改變而改變

JS實(shí)現(xiàn)頁面隨窗口的改變而改變

2012/11/3 16:05:23作者：佚名來源：網(wǎng)絡(luò)

移動(dòng)端

【實(shí)例名稱】

JS實(shí)現(xiàn)頁面隨窗口的改變而改變

【實(shí)例描述】

當(dāng)窗口改變時(shí)，頁面隨著窗口的改變而改變，這是頁面設(shè)計(jì)的關(guān)鍵。本例學(xué)習(xí)如何實(shí)現(xiàn)這種設(shè)計(jì)。

【實(shí)例代碼】

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>標(biāo)題頁-學(xué)無憂（yzddtk.cn）</title>
<style>body{margin:0px;}table{border-collapse:collapse;}</style>
</head>
<body>
<table width="100%" height="100%" border="3" bgcolor="gray" bordercolor="red">
      <tr>
           <td>測(cè)試頁面的改變1</td><td>測(cè)試頁面的改變2</td>
      </tr>
</table></body>
</html>
 

【運(yùn)行效果】

 頁面隨窗口的改變而改變運(yùn)行效果

【難點(diǎn)剖析】

本例的重點(diǎn)是表格的寬度和高度的設(shè)置。將寬度和高度設(shè)置為百分比的形式，表示表格占當(dāng)前窗口的比例。如果設(shè)置高度為80%，則不管窗口如何改變，表格的高度永遠(yuǎn)占窗口的80%，這樣就實(shí)現(xiàn)了表格隨窗口改變而改變的功能。

【源碼下載】

為了JS代碼的準(zhǔn)確性，請(qǐng)點(diǎn)擊：頁面隨窗口的改變而改變 進(jìn)行本實(shí)例源碼下載