前面詳細(xì)介紹了CSS可設(shè)置的列表樣式，本節(jié)通過(guò)在網(wǎng)頁(yè)設(shè)計(jì)中新聞欄目實(shí)例練習(xí)CSS設(shè)置列表的方法，以及列表在網(wǎng)頁(yè)中的應(yīng)用。
【操作步驟】
第1步，啟動(dòng)Dreamweaver，新建一個(gè)網(wǎng)頁(yè)，保存為index.html。
第2步，構(gòu)建網(wǎng)頁(yè)結(jié)構(gòu)。在本示例中首先用3個(gè)<div>標(biāo)簽設(shè)置了新聞欄目的容器，在每一個(gè)<div>塊中分別用<ul>標(biāo)簽和<li>標(biāo)簽定義了新聞欄目和新聞標(biāo)題。
<div class="junshi">
<h2>軍事新聞<span>more...</span></h2>
<ul>
<li><a href="#">中國(guó)為何不怕美國(guó) 英國(guó)人一句話道出真相。</a> </li>
<li><a href="#">日本記者南沙回來(lái)很感慨：終于領(lǐng)略中國(guó)的強(qiáng)大。</a></li>
<li><a href="#">外媒：運(yùn)載馬航MH17殘骸卡車抵達(dá)荷蘭境內(nèi)。</a> </li>
<li><a href="#">揭秘藏在中國(guó)的軍事間諜：自稱“軍迷”搜集資料。</a></li>
</ul>
</div>
<div class="caijing">
<h2>財(cái)經(jīng)資訊<span>more...</span>
</h2> <ol> <li><a href="#">莫迪亞諾小說(shuō)年底密集上市 國(guó)內(nèi)出版商爭(zhēng)搶版權(quán)。</a> </li>
<li> <a href="#">銀行間外匯市場(chǎng)事前準(zhǔn)入許可明年取消。 </a></li>
<li><a href="#">華潤(rùn)萬(wàn)家花椒粉鉛超標(biāo)兩倍 稱是“土地”惹的禍。 </a></li>
<li> <a href="#">人民幣即期匯率兩天暴跌逾500點(diǎn)。</a></li>
</ol>
</div><div class="yule">
<h2>娛樂(lè)資訊<span>more...</span></h2>
<ul>
<li><a href="#">林志玲張柏芝范冰冰章子怡 夜店性感狂野銷魂。</a> </li>
<li><a href="#"> 《匆匆那年》熱映 歡樂(lè)六人行特輯爆主演趣事。 </a></li>
<li><a href="#">杜德偉曝關(guān)之琳將結(jié)婚 指王菲嘉玲生日玩快閃。</a> </li>
<li><a href="#">李晨鄧超Angelababy 細(xì)數(shù)《奔跑吧兄弟》嘉賓。</a></li>
</ul>
</div>
此時(shí)網(wǎng)頁(yè)的基本結(jié)構(gòu)已經(jīng)搭建好了，但是由于在設(shè)計(jì)網(wǎng)頁(yè)時(shí)沒(méi)有進(jìn)行CSS樣式設(shè)置，界面中只是把文字內(nèi)容羅列起來(lái)，沒(méi)有任何修飾。
第3步，在網(wǎng)站建設(shè)中，在<head>標(biāo)簽內(nèi)添加<styletype="text/css">標(biāo)簽，定義一個(gè)內(nèi)部樣式表，然后輸入下面樣式，定義網(wǎng)頁(yè)基本屬性、新聞欄目的樣式以及文字“more…”樣式。
body { /*網(wǎng)頁(yè)基本屬性*/
font-size: 13px; /*字體大小*/
font-family: "黑體"; /*字體樣式*/
margin: 0px; /*清除頁(yè)邊距*/
padding: 0px; /*清除頁(yè)邊距*/
background:url(images/bg.png) no-repeat; /*模擬新聞欄目頁(yè)面效果*/}
h2 { /*新聞欄目的文本樣式*/ margin: 24px 0 0 5px; /*新聞欄目文字上下補(bǔ)白*/
color: #006699; font-size: 16px;}
h2 span { /*文字“more…”的顯示樣式*/
color: #999; float: right; /*右對(duì)齊*/}
以上代碼中，設(shè)置了頁(yè)面的基本屬性，<h2>標(biāo)簽的內(nèi)容是新聞的欄目，設(shè)置了其字體顏色、大小等屬性。<span>標(biāo)簽的內(nèi)容是文字“more…”，
第4步，定義網(wǎng)頁(yè)<div>塊，也就是新聞欄目塊的共有屬性。
div{ /*每一個(gè)新聞欄目塊的樣式*/
line-height:16pt; /*行間距*/
width:400px; /*塊的寬度*/
margin:10px 0 0 10px; /*各個(gè)新聞塊之間距離*/}
第5步，為列表<ul>和<ol>添加CSS樣式。
.part1 ul{ /*第一個(gè)新聞塊的列表樣式*/
margin-left:40px; /*文字左側(cè)離邊框的距離*/
list-style-type:upper-alpha; /*項(xiàng)目符號(hào)是大寫(xiě)字母*/}.part2 ol { /*第二個(gè)新聞塊的列表樣式*/
margin-left:40px;
list-style-type: upper-roman; /*項(xiàng)目符號(hào)是大寫(xiě)羅馬字母*/}.part3 ul { /*第三個(gè)新聞塊的列表樣式*/
margin-left:40px;
list-style-type: circle; /*項(xiàng)目符號(hào)是空心圓*/}
以上代碼中，分別設(shè)置了3個(gè)新聞欄目的列表樣式。可以看到，項(xiàng)目符號(hào)和編號(hào)按設(shè)置的樣式進(jìn)得了顯示。
第6步，從圖4.17中可以看出，網(wǎng)頁(yè)已初見(jiàn)效果，最后定義<li>標(biāo)簽和<a>標(biāo)簽的樣式。
li { /*<li>標(biāo)簽樣式，也就是新聞標(biāo)題樣式*/
margin:5px 0 5px 0; /*每條新聞標(biāo)題之間間隔*/}a { /*鏈接樣式*/
text-decoration:none; /*不顯示下劃線*/
color:#000;}此時(shí)新聞欄目示例設(shè)計(jì)完成。
當(dāng)前文章標(biāo)題：在網(wǎng)頁(yè)設(shè)計(jì)中設(shè)計(jì)新聞列表
當(dāng)前URL：http://www.ww44088.com/news/wzzz/3091.html
