css多行多列的新聞模式

看圖:

這種效果,甚至是三列四列的新聞模組,以前我都用table,以為比css方便,直到後來發先了a的浮動之後,原來用ul更方面,更容易控制,先來看看代碼吧:

引用:

.news{}
.news li{ list-style:none; clear:both}
.news li a#n1{ text-decoration:none; float:left; line-height:22px;}
.news li a#n2{ text-decoration:none; float:right; color:#999}
.news li a#n3{ float:right; padding-right:20px;color:#999}
.news li a#n1:hover{ text-decoration:underline;}
.news li a#n3:hover,.news li a#n3:hover{ text-decoration:none;}
a#n1為新聞標題,左浮動,n2和n3為點擊次數和發布日期,右浮動,距離20px;
注意,li上一定要清除所有浮動.
測試支援ie6,ie7,ff,opera.

樣本,三列: xmlns="http://www.w3.org/1999/xhtml">

這是三列

• 左列，新聞標題項點 擊發布日期
• >> 熱烈祝賀weilaixu.cn隆重上線88882008-08-08
• >> 熱烈祝賀weilaixu.cn隆重上線88882008-08-08
• >> 熱烈祝賀weilaixu.cn隆重上線88882008-08-08
• >> 熱烈祝賀weilaixu.cn隆重上線88882008-08-08