表格除了顯示數(shù)據(jù)外，還常常被用來排版。雖然如今比較流行用DIV布局頁面，但是由于表格在網(wǎng)頁設(shè)計(jì)時(shí)容易上手、快捷、兼容性好，所以表格布局仍然受到不少網(wǎng)頁設(shè)計(jì)者的青睞。
【操作步驟】
第1步，新建文檔，保存為index.html。構(gòu)建網(wǎng)頁結(jié)構(gòu)。本例中在網(wǎng)站建設(shè)中應(yīng)用了表格嵌套，設(shè)置了外層表格outer和內(nèi)層表格inner進(jìn)行布局，從圖中可以看到，外層表格是一個(gè)3行1列的表格，在外層表格的第2行中，又嵌套了一個(gè)1行2列的表格。
<table class="outer">
<tr>
<td>
<img src="images/bg.jpg"></td>
</tr>
<tr>
<td><table class="inner">
<tr>
<td class="left"><ul>
<li><a href="#">
首頁</a></li>
<li><a href="#">古典音樂</a></li>
<li><a href="#">現(xiàn)代流行</a></li>
<li><a href="#">爵士音樂</a></li>
<li><a href="#">70后音樂</a></li>
<li><a href="#">80后音樂</a></li>
<li><a href="#">90后音樂</a></li>
</ul></td>
<td class="right"><img src="images/1.jpg" /></td>
</tr>
</table></td>
</tr>
<tr>
<td class="footer">
<p>|聯(lián)系我們 |關(guān)于我們 |</p>
<p>感謝您的支持，希望明天會(huì)更好??！</p></td>
</tr>
</table>
以上代碼定義了表格的結(jié)構(gòu)，外層表格的3行分別是：
第1行設(shè)置了banner圖片，第2行是網(wǎng)頁正文部分，嵌套了另一個(gè)表格，第3行定義了網(wǎng)頁的footer部分；內(nèi)層表格是一個(gè)1行2列的表格，左側(cè)單元格設(shè)置了<ul>列表，定義網(wǎng)頁的導(dǎo)航欄，右側(cè)單元格是網(wǎng)頁的內(nèi)容部分。
第2步，定義網(wǎng)頁基本屬性和外層表格樣式。在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式：
body { /*網(wǎng)頁基本屬性*/ background: #e9e8dd; /*網(wǎng)頁背景顏色*/
text-align: center;
}.outer {/*外層表格樣式*/
width: 800px; /*表格寬度*/
border: 1px #999999 solid; /*表格邊框*/
margin: 0 auto;/*與父標(biāo)簽中的text-align:center配合實(shí)現(xiàn)水平居中*/}
.footer {/*外層表格第3行單元格樣式*/
background-color: #BEC4D0; /*單元格背景顏色*/
text-align: center; /*水平居中*/
font-size: 12px; /*字體大小*/
color: #0033FF; /*字體顏色*/}
在以上代碼中，首先定義了網(wǎng)頁基本屬性；在outer中首先定義了表格寬度，并定義了表格的外邊框，margin:0 auto與body中的text-align:cen-ter兩條語句可實(shí)現(xiàn)IE與FF瀏覽器中的水平居中。在footer中，定義了外層表格中第3行單元格的樣式。此時(shí)，外層表格的所有樣式設(shè)置完畢。
第3步，設(shè)置內(nèi)層表格inner樣式。
.left { /*內(nèi)層表格左側(cè)單元格樣式*/
width: 150px; /*左側(cè)單元格寬度*/
background-color: #FF3300; /*背景顏色*/
border: 1px red solid; /*單元格邊框*/
text-align: center; /*水平居中*/}
.right {/*內(nèi)層表格右側(cè)單元格樣式*/
width: 650px; /*右側(cè)單元格寬度*/
background-color: #BEC4D0; /*背景顏色*/
border: 1px red solid; /*單元格邊框*/
text-align: center; /*水平居中*/}
以上代碼完成了內(nèi)層表格中兩個(gè)單元格樣式的設(shè)置。
第4步，設(shè)置內(nèi)層表格中的左側(cè)導(dǎo)航條樣式。
ul {/*列表樣式*/
list-style-type: none; /*不顯示列表項(xiàng)目符號(hào)*/
font-weight: bold; /*字體加粗*/
font-size: 16px; /*字體大小*/}
li { height: 40px; /*列表項(xiàng)的高寬*/ }
上面代碼實(shí)現(xiàn)了導(dǎo)航欄的樣式。
當(dāng)前文章標(biāo)題：如何在網(wǎng)頁設(shè)計(jì)中設(shè)計(jì)音樂首頁
當(dāng)前URL：http://51zuanshi.com.cn/news/wzzz/3120.html
