用css制作星级评分效果

<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>

.star-rating li.current-rating{ background: url(star_rating.gif) left bottom; position: absolute; height: 30px; display: block; text-indent: -9000px; z-index: 1; }

1. .star-rating{ 2. … 3. background: url(star_rating.gif) top left repeat-x; 4. }

.star-rating li a:hover{ background: url(star_rating.gif) left center; … }

Average Rating|平均值: 3.5 Each Star Width|每个星的宽度: 30px; Set width to|将宽度设为: 3.5 * 30 = 105px

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18