用CSS写的星级评分

【 tulaoshi.com - Web开发 】

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

HTML部分：

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

h1CSS: 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
lia href="#" title="1 star out of 5" class="one-star"1/a/li
lia href="#" title="2 stars out of 5" class="two-stars"2/a/li
lia href="#" title="3 stars out of 5" class="three-stars"3/a/li
lia href="#" title="4 stars out of 5" class="four-stars"4/a/li
lia 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
lia href="#" title="1 star out of 5" class="one-star"1/a/li
lia href="#" title="2 stars out of 5" class="two-stars"2/a/li
lia href="#" title="3 stars out of 5" class="three-stars"3/a/li
lia href="#" title="4 stars out of 5" class="four-stars"4/a/li
lia href="#" title="5 stars out of 5" class="five-stars"5/a/li
/ul
/span
h1Let's make it smaller/h1

ul class="star-rating small-star"
li class="current-rating" style="width:50%"Currently 2.5/5 Stars./li
lia href="#" title="1 star out of 5" class="one-star"1/a/li
lia href="#" title="2 stars out of 5" class="two-stars"2/a/li
lia href="#" title="3 stars out of 5" class="three-stars"3/a/li
lia href="#" title="4 stars out of 5" class="four-stars"4/a/li
lia 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;}
这个效果懂得人理解起来就非常方便，不懂的人是需要费些时间来理解，就像我是费了些时间来理解。

资料引用:http://www.knowsky.com/441347.html