本文我们说说新闻列表，新闻列表是一个网站的重要组成元素。我们会经常碰到它，如何处理他的外观显得尤为重要。这个实例中，我们将标题与日期作单独的浮动，而且在链接的鼠标悬停时，呈现出不同的色彩变化。而且我们控制LI的背景，让其也产生一些交互。总体上的效果还不错。大家可以看看下面的图片： 具体代码如下： <link href="jzxue.css" _fcksavedurl=""jzxue.css"" rel="stylesheet" type="text/css"> <ul id="pagelist"> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com文字</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是相关文字标题</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com字</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com文字</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是相关文字标题</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com字</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com文字</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是相关文字标题</span><span class="ldt">2011-03-22</span></a></li> <li><a href="#"><span class="lbt">这里是建站学jzxue.com这里是建站学jzxue.com字</span><span class="ldt">2011-03-22</span></a></li> jzxue.CSS代码如下： #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;} (责任编辑：admin) |