原文：
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.*/
    position: relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
    background: url(star_rating.gif) top left repeat-x; /* By repeating this image horizontally, the list will appear to have five stars.*/
    }

根據代碼我們知道：
去掉了ul的margin和padding以及list-style，定義了高20px寬100px的一個區塊

下來時按鈕元素的制作，下面是css

    .star-rating li{
    padding:0px; /* no padding at all*/
    margin:0px; /* no margin at all*/
    /*\*/ /*Backslash hack, this causes IE5 Mac NOT to see this rule*/
    float: left; /* for any other browser, we are going to float left, this makes a horizontal list*/
    /* */ /* end the IE5 Backslash hack*/
    }

這段代碼讓li實現橫向排放，并解決IE5 MAC bug

繼承上面的按鈕元素樣式，再定義鼠標動作，下面是css

   .star-rating li a{
    display:block; /* we want a block item, so that we can mess with its height and width*/
    width:20px; /* easy stuff, we want the width to be the same as the star width*/
    height: 20px; /* same as the width*/
    text-decoration: none; /* remove the underline from the link*/
    text-indent: -9000px; /* indent the text off the screen using a [url=http://www.mezzoblue.com/tests/revised-image-replacement/]image-replacement technique[/url], we dont want to see the text anymore.*/
    z-index: 20; /*we'll come back to this*/
    position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/
    padding: 0px; /*once again, we don't need any padding*/
   background-image:none; /* we will not show the star*/
   }

  13. .star-rating li a:hover{
  14. background: url(star_rating.gif) left bottom; /*this is where the magic is*/
  15. z-index: 1; /*move this star to the bottom of the z-index stack*/
  16. left: 0px; /*move this star all the way to the left, aligned with the side of the UL parent item*/
  17. }

下來我們要考慮怎樣才能顯示不同的星級，三星?四星?原理是什么，我們繼續將背景圖片橫向重復顯示，然后定義a和a:hover的寬度來區分選擇的星級。

下面是css

   .star-rating a.one-star{
    left: 0px;
    }  
   .star-rating a.one-star:hover{
    width:20px;
    }
   .star-rating a.two-stars{
    left:20px;
   }
   .star-rating a.two-stars:hover{
   width: 40px;
   }
   .star-rating a.three-stars{
   left: 40px;
   }
   .star-rating a.three-stars:hover{
   width: 60px;
   }
   .star-rating a.four-stars{
   left: 60px;
   }
   .star-rating a.four-stars:hover{
   width: 80px;
   }
   .star-rating a.five-stars{
   left: 80px;
   }
   .star-rating a.five-stars:hover{
   width: 100px;
   }

到此，這個制作完成