CSS li在列表页里的应用

在对列表进行控制的时候，我们习惯用li标签，而在使用的时候，往往遇到样试的问题和浏览器兼容的问题

下面看一段新闻列表的应用

<div class="news">

<ul>

<li><span>2011-12-20<span><a href="#">新闻标题</a></li>

<li><span>2011-12-20<span><a href="#">新闻标题</a></li>

<li><span>2011-12-20<span><a href="#">新闻标题</a></li>

<li><span>2011-12-20<span><a href="#">新闻标题</a></li>

<li><span>2011-12-20<span><a href="#">新闻标题</a></li>

</ul>

</div>

 

下面是CSS

.news {width:200px;height:200px;} //层的大小

.news li{line-height:30px;margin-left:10px; border-bottom:1px dashed #dedede;}   //li的行高为30，距离左边10个像素 ，下边框加上一条虚线

.news li:last-child {border-bottom:0}   //使最后一条记录的虚线隐藏

.news li a{color:#000;font-size:12px;}  //设计字体颜色和字号

.news li a:hover{color:red; text-decoration:underline;}  //鼠标指向变为红色，并加上下划线

.news li span{float:right;margin-right:10px;}  //使span标记右浮动，并距离右侧10个像素

这里使用到了last-child ，last-child的作用是去除最后一个 li 的下边框，这里需要注意的是在 IE6 下这个选择器是无效的。