DIVCSS實例教程：一款清新風(fēng)格的CSS新聞列表制作_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　今天我們說說一款新聞列表的制作。新聞列表是一個網(wǎng)站的重要組成元素。我們會經(jīng)常碰到它，如何處理他的外觀顯得尤為重要。這個實例中，我們將標題與日期作單獨的浮動，而且在鏈接的鼠標懸停時，呈現(xiàn)出不同的色彩變化。而且我們控制LI的背景，讓其也產(chǎn)生一些交互。總體上的效果還不錯。大家可以看看下面的圖片：

　　XHTML代碼很簡單，就是一個無序列表，不過我們對標題和時間設(shè)置了不同的CLASS以方便控制。

示例代碼 [m.dounai2.com]

<ul id="pagelist">
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字標題的文字標題的文字標題的文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字標題的文字標題的文字標題的文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字標題的文字標題的文字標題的文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題2007-08-06</a></li>
<li><a href="#">這里是相關(guān)文字標題的文字這里是相關(guān)文字標題的文字字2007-08-06</a></li>
</ul>

　　我們看下面的CSS代碼：

示例代碼 [m.dounai2.com]

#pagelist {border:4px solid #ccc; padding:10px; width:530px; font-size:12px; list-style-type:none; }
#pagelist li {width:530px; height:30px;}
#pagelist li a .lbt {display:block; width:448px; float:left; text-indent:20px; text-decoration:none; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; display:inline;}
#pagelist li a .ldt {display:block; width:75px; float:right; text-align:center; color:#069; text-decoration:none; display:inline;}
#pagelist li a {width:530px; height:30px; display:block; line-height:30px; color:#666; text-decoration:none; cursor:hand; background:url(20070807_bg.png) no-repeat 0 0;}
#pagelist li a:hover{ color:#03c; text-decoration:none; background:url(20070807_bg.png) no-repeat 0 -30px;}
#pagelist li a:hover .ldt {color:#000;}

　　首先我們定義了UL的邊框，內(nèi)邊距等相關(guān)常用的屬性。
　　我們設(shè)置了LI的寬度為530PX，高度為30px.
　　我們對標題和時間進行了單獨的設(shè)置。相關(guān)的屬性也很輕易理解的。
　　我們設(shè)置了鏈接的樣式。主要需要注重的是色彩的變化及設(shè)置cursor:hand;。