在DIV+CSS排版中新闻列表的制作方法

在DIV+CSS排版中新闻列表的制作方法,在DIV+CSS排版中新闻列表的制作方法

最终效果:

5月30日 新闻标题01 5月30日 新闻标题02 5月30日 新闻标题03 5月30日 新闻标题04

CSS代码:

.list{margin: 0px 10px 20px;text-align: left;} .list ul{list-style-type: none;margin: 0px;padding: 0px; } .list li{background: url(/imagelist/06/31/gu432qq5q695.gif) repeat-x bottom;/*列表底部的虚线*/width: 100%;} .list li a{color: #777777;display: block;padding: 6px 0px 4px 15px;background: url(/imagelist/06/31/7ei5t3sv.gif) no-repeat 0 6px;/*列表左边的箭头图片*/ } .list li span{float: right;/*使span元素浮动到右面*/text-align: right;/*日期右对齐*/ } .list li a:hover{color: #336699;background: url(/imagelist/06/31/jq1ysff5b0ac.gif) repeat-x bottom; }

注意:span一定要放在前面,反之会产生换行

<ul <li<span5月30日 </span<a href="#"新闻标题01</a</li <li<span5月30日 </span<a href="#"新闻标题02</a</li <li<span5月30日 </span<a href="#"新闻标题03</a</li <li<span5月30日 </span<a href="#"新闻标题04</a</li </ul