复制内容到剪贴板
代码:
原文：Creating a Star Rater using CSS
链接：http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
版权：版权归原作者所有，翻译文档版权归本人|greengnn,和blueidea。第一个模型中忽视了半星级的情况和无初始的星级，下来我们就是要解决这个问题。
现回顾一下
第一个模型,
文章地址
对这篇文章不理解的建议去看看
用CSS制作星级评分I
Step 1. 先看看效果|Check it in action
图1
看看效果?
Step 2: The XHTML
复制内容到剪贴板
代码:
<ul class="star-rating">
<li class="current-rating">Currently 3.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>和第一个模型的结构相似，唯一不同的是:
<li class="current-rating">Currently 3.5/5 Stars.</li>
定义初始值
Step 3: The Star Image
我们制作一个有三个星的图片，第一个星是空值，第二个是要选择的值，第三个是真实的值。
图2
Step 4: The CSS, the Magic
复制内容到剪贴板
代码:
.star-rating li.current-rating{
background: url(star_rating.gif) left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}他定义了初始值，为了避免继承容器ul的相对定位，采用position: absolute;每个星的高度为height:30px;别的就是隐藏文本和定义对齐方式。
空值css
复制内容到剪贴板
代码:
1. .star-rating{
2. …
3. background: url(star_rating.gif) top left repeat-x;
4. }选择值css
复制内容到剪贴板
代码:
.star-rating li a:hover{
background: url(star_rating.gif) left center;
…
}初始值当然会随着选择变动，那么怎样实现它的变化呢?
<li class="current-rating"
style="width:105px;">Currently 3.5/5 Stars.</li>
看了这段代码相信你就知道是什么原因了!那这个width是怎样计算的呢?
复制内容到剪贴板
代码:
Average Rating|平均值: 3.5
Each Star Width|每个星的宽度: 30px;
Set width to|将宽度设为: 3.5 * 30 = 105px下面欣赏一下这个新模型吧?
* Example 1: 150 x 30 star rating system
* Example 2: 125 x 25 star rating system
* Example 3: 25 x 125 vertical star rating system
