用CSS写的星级评分

• 用CSS写的星级评分
• 学习用CSS写的星级评分
• CSS教程

利用层的定位、层的顺序以及背景定位来实现的星级评分。

HTML部分：

<h1>CSS: Star Rating Redux</h1>
<ul class="star-rating">
<li class="current-rating" style="width:60%;">Currently 3/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>

<h1>CSS: Star Rating Redux inline</h1>
Rate this:
<span class="inline-rating">
<ul class="star-rating small-star">
<li class="current-rating" style="width:30%;">Currently 1.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul></span>
And This:
<span class="inline-rating">
<ul class="star-rating small-star">
<li class="current-rating" style="width:80%;">Currently 4/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
</span>
<h1>Let's make it smaller</h1>

<ul class="star-rating small-star">
<li class="current-rating" style="width:50%">Currently 2.5/5 Stars.</li>
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li>
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li>
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li>
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li>
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li>
</ul>
这部分的关键在于current-rating，把它的宽度定为50%，然后设置背景平铺，之后把它的层的顺序设为最低，这样就会形成一个初始的分值。
再就是a标签和hover的灵活应用了：上面的例子中一共有5个a标签，那么每个a标签的宽度就是20%，以此类推给每个a标签都定一个不同的宽度；接着，给每个a标签都定义不同顺序z-index，再把hover的样式用背景定位的方法来实现鼠标悬停后不同的背景切换，正因为我们已经把z-index的顺序都定义好了，所以才会形成不同宽度的a标签的遮盖，就是评分的效果了。

再看下CSS：

.star-rating,.star-rating a:hover,.star-rating a:active,.star-rating a:focus,.star-rating .current-rating{background:url(star.gif) left -1000px repeat-x;}
.star-rating{position:relative;width:125px;height:25px;overflow:hidden;list-style:none;margin:0;padding:0;background-position:left top;}
.star-rating li{display:inline;}
.star-rating a,.star-rating .current-rating{position:absolute;top:0;left:0;text-indent:-1000em;height:25px;line-height:25px;outline:none;overflow:hidden;border:none;}
.star-rating a:hover,.star-rating a:active,.star-rating a:focus{background-position:left bottom;}
.star-rating a.one-star{width:20%;z-index:6;}
.star-rating a.two-stars{width:40%;z-index:5;}
.star-rating a.three-stars{width:60%;z-index:4;}
.star-rating a.four-stars{width:80%;z-index:3;}
.star-rating a.five-stars{width:100%;z-index:2;}
.star-rating .current-rating{z-index:1;background-position:left center;}

/* for an inline rater */
.inline-rating{display:-moz-inline-block;display:-moz-inline-box;display:inline-block;vertical-align:middle;}

/* smaller star */
.small-star{width:50px;height:10px;}
.small-star,.small-star a:hover,.small-star a:active,.small-star a:focus,.small-star .current-rating{background-image:url(star_small.gif);line-height:10px;height:10px;}
这个效果懂得人理解起来就非常方便，不懂的人是需要费些时间来理解，就像我是费了些时间来理解。