DIVCSS实例教程：一款清新风格的CSS新闻列表制作_Div+CSS教程

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂傚倷绀佸ú锕傚焻缁€鎱筪eCMS闁荤喐鐟ュΛ婵嬨€傞崼鏇炴瀬婵炲棙鍨熼弻锟�婵炴垶姊规竟鍡涘煘閺嶎厽鈷掗柨鐕傛嫹缂備礁顦遍崰鎰耿閸ヮ剙绀夐柍銉ㄦ珪閻濓拷闂備緡鍋勯ˇ杈╃礊婢跺本鍏滈柡鍥ㄦ皑闂夊秹鏌ゆ潏銊︻棖缂佹唻鎷� 闂佸搫鍟版慨鎾椽閺嶎偆鍗氭繛鍡樻尰濮ｆ劗鈧鎮堕崕閬嶅矗閿燂拷,闂佽皫鍕姢閻庤濞婂鍫曞礃椤斿吋顏熸繛鎴炴尨閸嬫捇姊哄▎鎯ф灈闁告瑥绻樺濠氭晸閿燂拷!

　　今天我们说说一款新闻列表的制作。新闻列表是一个网站的重要组成元素。我们会经常碰到它，如何处理他的外观显得尤为重要。这个实例中，我们将标题与日期作单独的浮动，而且在链接的鼠标悬停时，呈现出不同的色彩变化。而且我们控制LI的背景，让其也产生一些交互。总体上的效果还不错。大家可以看看下面的图片：

　　XHTML代码很简单，就是一个无序列表，不过我们对标题和时间设置了不同的CLASS以方便控制。

示例代码 [www.mb5u.com]

<ul id="pagelist">
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字标题的文字标题的文字标题的文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题2007-08-06</a></li>
<li><a href="#">这里是相关文字标题的文字这里是相关文字标题的文字字2007-08-06</a></li>
</ul>

　　我们看下面的CSS代码：

示例代码 [www.mb5u.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的边框，内边距等相关常用的属性。
　　我们设置了LI的宽度为530PX，高度为30px.
　　我们对标题和时间进行了单独的设置。相关的属性也很轻易理解的。
　　我们设置了链接的样式。主要需要注重的是色彩的变化及设置cursor:hand;。