如何在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)音樂(lè)首頁(yè)

表格除了顯示數(shù)據(jù)外,還常常被用來(lái)排版。雖然如今比較流行用DIV布局頁(yè)面,但是由于表格在網(wǎng)頁(yè)設(shè)計(jì)時(shí)容易上手、快捷、兼容性好,所以表格布局仍然受到不少網(wǎng)頁(yè)設(shè)計(jì)者的青睞。

【操作步驟】

第1步,新建文檔,保存為index.html。構(gòu)建網(wǎng)頁(yè)結(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="#">

首頁(yè)</a></li>                            

<li><a href="#">古典音樂(lè)</a></li>                            

<li><a href="#">現(xiàn)代流行</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ì)更好?。?lt;/p></td>    

</tr>

</table>

以上代碼定義了表格的結(jié)構(gòu),外層表格的3行分別是:

第1行設(shè)置了banner圖片,第2行是網(wǎng)頁(yè)正文部分,嵌套了另一個(gè)表格,第3行定義了網(wǎng)頁(yè)的footer部分;內(nèi)層表格是一個(gè)1行2列的表格,左側(cè)單元格設(shè)置了<ul>列表,定義網(wǎng)頁(yè)的導(dǎo)航欄,右側(cè)單元格是網(wǎng)頁(yè)的內(nèi)容部分。

第2步,定義網(wǎng)頁(yè)基本屬性和外層表格樣式。在<head>標(biāo)簽內(nèi)添加<style type="text/css">標(biāo)簽,定義一個(gè)內(nèi)部樣式表,然后輸入下面樣式:

body { /*網(wǎng)頁(yè)基本屬性*/    background: #e9e8dd;           /*網(wǎng)頁(yè)背景顏色*/    

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)頁(yè)基本屬性;在outer中首先定義了表格寬度,并定義了表格的外邊框,margin:0 auto與body中的text-align:cen-ter兩條語(yǔ)句可實(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)航欄的樣式。



網(wǎng)站建設(shè)、網(wǎng)絡(luò)營(yíng)銷(xiāo)咨詢專線:0871-63535511(點(diǎn)擊可一鍵撥號(hào))