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