CSS实例新闻列表制作

作者:divcss教程吧      点击次数:1018次     发布日期:2015-08-06

CSS实例新闻列表制作

先看一下HTML源文件,典型的采用ULLI形式:

<ul class="list">
<li><span>2015-8-6 </span><a href="http://www.divcss8.com/#">学CSS就找divcss8</a></li>


<li><span>2015-8-6 </span><a href="http://www.divcss8.com/#">学CSS就找divcss8</a></li>

<li><span>2015-8-6 </span><a href="http://www.divcss8.com/#">学CSS就找divcss8</a></li>

<li><span>2015-8-6 </span><a href="http://www.divcss8.com/#">学CSS就找divcss8</a></li>
</ul>

再看一下CSS代码

 

.list{

width:300px;
list-style-type: none;/*控制列表样式为无*/
margin: 0px;
padding: 0px;
}

.list li{
border-bottom:1px dashed #ccc;/*新闻列表下方出现虚线*/
}
.list li a{
color: #777777;
display: block;
padding: 0px 0px 4px 15px;
background: url(images/xiaotupiao.gif) no-repeat 0 6px;/*为新闻列表的前方添加一个小图标。图标大家自己找,写在这个位置是为了以鼠标悬停a:hover时可以更换小图标样式*/

}

.list li span{
float: right;/*使span元素浮动到右面*/
text-align: right;/*日期右对齐*/
}
.list li a:hover{
color: #336699;
background:  url(images/xiaotupiao.gif) no-repeat 0 6px;
}

分享DIVCSS8