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

  • 2019-11-01 11:02:13
  • 閱讀次數(shù):
  • 作者:盈嵐科技小編
  • 來源:http://m.supportcoffeeroasters.com

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

【操作步驟】

第1步,新建文檔,保存為index.html。構(gòu)建網(wǎng)頁結(jié)構(gòu)。本例中在網(wǎng)站建設(shè)中應(yīng)用了表格嵌套,設(shè)置了外層表格outer和內(nèi)層表格inner進(jìn)行布局,從圖中可以看到,外層表格是一個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)系我們   |關(guān)于我們  |</p>            

<p>感謝您的支持,希望明天會更好??!</p></td>    

</tr>

</table>

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

第1行設(shè)置了banner圖片,第2行是網(wǎng)頁正文部分,嵌套了另一個表格,第3行定義了網(wǎng)頁的footer部分;內(nèi)層表格是一個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)簽,定義一個內(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è)置完畢。

第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)層表格中兩個單元格樣式的設(shè)置。

第4步,設(shè)置內(nèi)層表格中的左側(cè)導(dǎo)航條樣式。

ul {/*列表樣式*/    

list-style-type: none;  /*不顯示列表項(xiàng)目符號*/    

font-weight: bold;      /*字體加粗*/    

font-size: 16px;        /*字體大小*/}

li { height: 40px;          /*列表項(xiàng)的高寬*/ }

上面代碼實(shí)現(xiàn)了導(dǎo)航欄的樣式。



當(dāng)前文章標(biāo)題:如何在網(wǎng)頁設(shè)計中設(shè)計音樂首頁

當(dāng)前URL:http://m.supportcoffeeroasters.com/news/wzzz/3120.html

上一篇:在網(wǎng)頁設(shè)計中設(shè)計動態(tài)效果的表格

下一篇:設(shè)計個人小站

網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷咨詢專線:181-8386-5875(點(diǎn)擊可一鍵撥號)