很多网页中会涉及到一些文章的排行,如最新文章,最火文章排行,这类文章列表的时候,往往会在前面添上一些表现出火热程度的图片,这里就来实例一下。
先看一种方法,将排列的小图标放在一张图上,然后作为背景,放在UL里,让UL自动扩展,再将li的内容padding-left或者text-indent一下,此方法要控制好图片和li的高度,避免错位。
<style type="text/css">
.main{width:300px;height:300px;}
.main ul{margin:0;padding:0;width:300px;background:url(li.jpg) no-repeat top left;}
.main ul li{list-style:none;height:22px;line-height:22px;padding-left:30px;border-bottom:1px #666 solid;}
</style>
<div>
<ul>
<li>XXXX</li>
<li>XXXX</li>
<li>XXXX</li>
</ul>
</div>
有朋友说此方法有缺陷,可以用,但不推荐;其实我是没看出哪里有什么缺陷的。
还有一种方法就是属于动态生成类的,先写好css,再用循环变量,个人觉得这很麻烦,我要不用脚本语言呢?
看实例先
.top10 li a.lv1 { background:url(images/top10.png) no-repeat 2px 10px; }
.top10 li a.lv2 { background:url(images/top10.png) no-repeat 2px -31px; }
.top10 li a.lv3 { background:url(images/top10.png) no-repeat 2px -72px; }
加个 lv+”i” I为循环变量,ASP中WHILE循环<li>”>就业规划;
在CSS 把LV1—LV10都定义好,让页面直接循环就行。
此方法感觉太过复杂。
转载请注明带链来源:春语精椿