现在很多网站为了加强与用户的沟通，提供了评分系统，关于商品的好坏，文章的质量如何，都可以加入评分系统。这种系统结合JavaScript与CSS创建，当然最终的结果还是要保存到数据库中。这里先谈谈关于样式的问题，JavaScript暂且不谈，我觉得重要的是如何构建HTML，结合图片素材创建CSS。网上大部分教程都是用的淘宝的HTML结构和CSS样式。淘宝提供的是Sprites图片，通过控制background-position属性来控制图片的显示位置。效果图。

HTML结构问题

<div id="shop-rating">
  <ul class="rating-level">
    <li><span class="one-star" start:value="20">20</span></li> <!-- or <a class="one-star">..</a> -->
    <li><span class="two-star" sart:value="40">40</span></li>
    <li><span class="three-star" sart:value="60">60</span></li>
    <li><span class="four-star" sart:value="80">80</span></li>
    <li><span class="five-star" sart:value="100">100</span></li>
  </ul>
</div>  

主要的疑问是这里是否有必要采用<a>标签，这个系统依赖于JavaScript的驱动，如果href属性为某个具体的网址，或者说不通过JavaScript也可以驱动，那么我认为应当使用<a>标签。单纯使用JavaScript来控制，我感觉使用<span>或者其他的更合适。至于鼠标的样式可以通过CSS来控制。下面来看CSS样式。

#shop-rating { width: 120px; height: 25px; overflow: hidden;  position: relative; }
.rating-level, .rating-level span { background: url(img/o_star.png) no-repeat 9999px 9999px; }
.rating-level { background-position: 0 0; width: 120px; height: 23px; position: relative; }
.rating-level li { display: inline; }
.rating-level span { height: 23px; position: absolute; text-indent: -2222px; }
.rating-level .one-star { width: 20%; z-index: 6; }
.rating-level .two-star { width: 40%;  z-index: 5; }
.rating-level .three-star { width: 60%; z-index: 4; }
.rating-level .four-star { width: 80%; z-index: 3; }
.rating-level .five-star { width: 100%; z-index: 2; }
.rating-level .one-star:hover,
.rating-level .two-star:hover {
  background-position: 0 -116px;
}
.rating-level .three-star:hover,
.rating-level .four-star:hover,
.rating-level .five-star:hover {
  background-position: 0 -28px;
}

提取了其中最主要的样式部分。关于这部分，position和z-index属性结合得非常好。先前总以为自己掌握了CSS，现在才发现自己只是一叶障目！单纯的CSS属性不会太难，可是组合起来并不是那么容易理解和掌握的。本人系菜鸟，所以只能以目前之理解能力来阐释，如有不妥，请不吝赐教。

刚开始我以为span的宽度和高度应该固定，这可以使用display:inline-block;来设置，可是后来发现，如果固定了span元素的大小就难以使用背景图片，因为背景只会显示在元素有限的空间中，无法达到连续选择的效果。这里淘宝的CSS样式中采用了绝对定位的方式，5个span元素，总长度100%，后一个span元素是前一个的两倍(这样为了使背景连续地显示出来)，然后通过设置z-index属性阻止覆盖前面的元素。当鼠标移到指定的span元素上，背景图片会根据元素的宽度来自动裁剪，从而达到显示部分，而隐藏其余的效果。