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