用css制作星级评分

原文：
Creating a Star Rater using CSS
链接：
http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
版权：
版权归原作者所有，翻译文档版权归本人|greengnn,和blueidea。
先看看效果
Step 1: XHTML
 <ul class="star-rating">    
      <li><a href="#" title="Rate this 1 star out of 5" class="one-star">1</a></li>     
      <li><a href="#" title="Rate this 2 stars out of 5" class="two-stars">2</a></li>    
      <li><a href="#" title="Rate this 3 stars out of 5" class="three-stars">3</a></li>    
      <li><a href="#" title="Rate this 4 stars out of 5" class="four-stars">4</a></li> 
      <li><a href="#" title="Rate this 5 stars out of 5" class="five-stars">5</a></li>
 </ul>
这里只介绍静态的技术，随后会给出系统的应用，你也是自己加程序来尝试一下，还可以采用ajax来做出绚丽的效果
Step 2:图像|Graphics
为了节省您的空间和宽带，我们采用gif图，这个图片就是打分的按钮。
图
Step 3:CSS
      .star-rating{
      list-style: none; /* turn off the default list image bullets*/
      margin: 3px; /*I wan’t some space around this thing*/
      padding: 0px; /* I’m anal. I’m pretty sure OL’s have a default padding of 0px, but we’ll set it to 0px just to be safe*/
      width: 100px; /*This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/
      height: 20px; /* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.*/
第 1 2 3 4 5 6 7 8 页