CSS打造评分星级效果
用纯css打造星级评分效果正在被越来越多地应用在网络中，结合ajax等技术，可以渲染出很出色的视觉效果和很棒的用户体验。
首先用中文写一下这个效果的算法：
- 1. 使用背景图片的位置切换来获得星级效果；
- 2. 整个效果最关键的地方就是“三层理论”，整个效果分为三层——空分层、分数层和打分层，三层的布局均为absolute，以避免ul本身自带的相对布局（当然用div也可以获得同样效果）；
- 3. 空分层就是使用背景图片中的“空星”作为背景，并横向平铺；
- 4. 分数层的宽度等于（分数*图片宽度）得到的数值，并且使用背景图片中的“分数星（例子中为黄色）”作为背景横向平铺；
- 5. 打分层就是将5个空链接置于5个星星的位置上（宽度要和背景图片吻合），并将5个a：hover的背景设为“打分星（这里为绿色）”，宽度设为星数*图片宽度，left为0(靠左，这样结合a：hover不同的宽度就可以出现打分效果)，垂直坐标小于a的垂直坐标（以确保当前a：hover不会遮挡住其他链接）；
我们看最后的运行效果：
提示：你可以先修改部分代码再运行。
相关博文
相关日志
- 浏览器兼容手册[总结]
- 仿校内textarea输入框字数限制效果
- jQuery滑动导航菜单 (2)
- 网页浮动工具条
- 最简单的代码实现Tab (2)
- 详解：JavaScript数据类型[转] (3)
- jQuery1.4官方文档中文版[转]
- 用户上传头像，等比例缩放
- 10个Js的小型库，效果真的很棒[转]
- 让IE6更快的走向灭亡[转] (2)
