css制作排行榜样式

很多网页中会涉及到一些文章的排行，如最新文章，最火文章排行，这类文章列表的时候，往往会在前面添上一些表现出火热程度的图片，这里就来实例一下。

先看一种方法，将排列的小图标放在一张图上，然后作为背景，放在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都定义好，让页面直接循环就行。
此方法感觉太过复杂。