首页>前端教程>CSS教程

CSS第十课:为文章列表前面添加小图标和数字排行榜

文章列表在网站上占据很大的面积,如何制作出美观的文章列表,以及如何在文章列表前面添加各种小图标,或者有数字的排行榜呢?

要掌握这篇文章的内容,需要有背景定位的基础知识哦,如果还不会的童鞋,建议先学习第九课的内容。

CSS第九课:利用background-position完成css sprite效果

文章列表前面添加小图标.png

查看案例  案例下载

一、无序列表

网站的列表几乎都是无序列表和定义列表,有序列表很少见。所以文章列表的HTML几乎都是一样的结构。

<ul id="point">
        <li><a href="#">“不会影响录取率”,江苏湖北的家长能放心吗?</a></li>
        <li><a href="#">工坊式科研创新不该被忽视</a> <span>往期</span></li>
        <li><a href="#" title="列车平价餐食是铁路公益性的体现">列车平价餐食是铁路公益性....</a> <span>往期</span></li>
</ul>

无序列表前面有一个默认的小黑点,根据浏览器的不同,这个小黑点的大小或者与文字之间的间隔都不同,关键是这个小黑点和超链接的文字默认是一种颜色,不能制作出足够的样式,因此需要去掉它,然后重新制作出小图标。

li{
	list-style:none;/*去掉列表前面的小符号*/}

二、利用背景定位实现小图标的添加

#point li{
	background:url(images/aicon.png) no-repeat -180px -60px;
	padding-left:20px;
	border-bottom:1px dashed #ddd;}

小图标最好是作为li的背景图片存在,这样鼠标经过文字的时候对它没有影响。

li里面的文字会压住小图标,所以需要设置padding-left的值,把文字往后推。小图标是背景图片,padding内边距对背景图片是没有影响的。

无序列表前面添加小图标.png

三、小图标不一样的时候

如果文章列表的小图标不一样,则需要为li添加不同的class,每一种class选择器对应一种小图标。

<ul id="qq">
        <li class="image"><a href="#">“不会影响录取率”,江苏湖北的家长能放心吗?</a></li>
        <li class="video"><a href="#">工坊式科研创新不该被忽视</a> <span>往期</span></li>
        <li class="image"><a href="#" title="列车平价餐食是铁路公益性的体现">列车平价餐食是铁路公益性....</a> <span>往期</span></li>
        <li class="video"><a href="#">“不会影响录取率”,江苏湖北的家长能放心吗?</a></li>
        <li class="zhibo"><a href="#">工坊式科研创新不该被忽视</a> <span>往期</span></li>
    </ul>

先为所有的li设置背景图片,再为不同的class选择器设置图片不同的定位。

#qq li{
	background:url(images/iconNew.png) no-repeat;
	padding-left:20px;
	}
#qq li.image{
	background-position:0 -91px;}
#qq li.video{
	background-position:0 -41px;}
#qq li.zhibo{
	background-position:0 -142px;
	padding-left:30px;}

无序列表前面添加不同的小图标.png

四、有数字的排行榜

看到有数字,估计很多童鞋会使用有序列表,但是有序列表前面默认添加的“1、2、3”等数字是没法修改样式的。

所以,还是只能使用无序列表,但是可以自己添加数字呀。

<ul id="top">
        <li><span>1</span><a href="#">《欢乐颂》</a></li>
        <li><span>2</span><a href="#">《大江东去》</a></li>
        <li><span>3</span><a href="#">《阿耐》</a></li>
</ul>

用一个<span></span>把数字包起来,放在<li></li>里面。

#top span{
	border:1px solid #C00;
	padding:0px 4px;
	background-color:#EF573D;
	color:#fff;
	font-size:12px;}

无序列表前面添加数字做排行榜.png

掌握了这些方法后,可以多观察优秀的网站是如何制作这类小图标的,其实使用CSS3的伪元素:before:after更棒,可以减少无用标签的使用。

如果同学们发现了错别字,可以直接在留言处指出,方便我修改哦。

点赞


8
保存到:

相关文章

Top