[翻译]用css制作星级评分 II
原文：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
- 转载请注明来源：IT学习网 网址：http://www.t086.com/ 向您的朋友推荐此文章
- 特别声明： 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载，但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站，我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们，我们会尽快予以更正。