原文：creating a star rater using css
链接：
http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/版权：版权归原作者所有，翻译文档版权归
greengnn所有。
第一个模型中忽视了半星级的情况和无初始的星级，下来我们就是要解决这个问题。
现回顾一下第一个模型,文章地址
对这篇文章不理解的建议去看看用css制作星级评分i
step 1: 先看看效果 | heck it in action
step 2: the xhtml
<ul class="star-rating">
<li class="current-rating">currently 3.5/5 stars.</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
和第一个模型的结构相似，唯一不同的是:
<li class="current-rating">currently 3.5/5 stars.</li>
定义初始值
step 3: the star image我们制作一个有三个星的图片，第一个星是空值，第二个是要选择的值，第三个是真实的值。
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:
.star-rating {
…
background: url(star_rating.gif) top left repeat-x;
}
选择值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
下面欣赏一下这个新模型吧?
.text:''):(d.getSelection?d.getSelection():'');void(keyit=window.open('http://my.poco.cn/fav/storeIt.php?t='+escape(d.title)+'&u='+escape(d.location.href)+'&c='+escape(t)+'&img=http://www.h-strong.com/blog/logo.gif','keyit','scrollbars=no,width=475,height=575,status=no,resizable=yes'));keyit.focus();){kind=logo}
