在DIV+CSS排版中新聞列表的制作方法
更新時(shí)間:2006年09月25日 00:00:00 作者:
CSS代碼:
.list{
margin: 0px 10px 20px;
text-align: left;
}
.list ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.list li{
background: url(/news/images/line.gif) repeat-x bottom;
/*列表底部的虛線*/
width: 100%;
}
.list li a{
color: #777777;
display: block;
padding: 6px 0px 4px 15px;
background: url(/news/images/dot.gif) no-repeat 0 6px;
/*列表左邊的箭頭圖片*/
}
.list li span{
float: right;/*使span元素浮動(dòng)到右面*/
text-align: right;/*日期右對(duì)齊*/
}
.list li a:hover{
color: #336699;
background: url(/news/images/dot2.gif) repeat-x bottom;
}
注意:span一定要放在前面,反之會(huì)產(chǎn)生換行
<ul class="list"> <li><span>2005年5月30日 </span><a href="#">新聞標(biāo)題01</a></li> <li><span>2005年5月30日 </span><a href="#">新聞標(biāo)題02</a></li> <li><span>2005年5月30日 </span><a href="#">新聞標(biāo)題03</a></li> <li><span>2005年5月30日 </span><a href="#">新聞標(biāo)題04</a></li> </ul>
相關(guān)文章
通過(guò)CSS實(shí)現(xiàn)逼真水滴動(dòng)效
哈嘍哈嘍!CSS真的好好玩啊,哈哈,反正我是愛(ài)了,空閑寫(xiě)著玩。畫(huà)畫(huà)不好的我樂(lè)了,下面就是一個(gè)用CSS3動(dòng)畫(huà)完成的模仿水珠的動(dòng)效,其中主要就是會(huì)使用CSS設(shè)置陰影效果以及@keyframes關(guān)鍵幀和一些選擇器的技術(shù),快來(lái)學(xué)習(xí)吧2021-08-08
CSS3+Js實(shí)現(xiàn)響應(yīng)式導(dǎo)航條
今天制作了一個(gè)響應(yīng)式導(dǎo)航條,能夠自動(dòng)隨著不同的屏幕分辨率或?yàn)g覽器窗口大小的不同而改變導(dǎo)航條的樣式,這里主要用到的就是CSS3的Media Query。2014-05-05

