首页 > 开发 > CSS > 正文

用CSS打造评分星级效果的一个实例

2024-07-11 08:40:27

字体：大中小

来源：转载

供稿：网友

　　用纯css打造星级评分效果正在被越来越多地应用在网络中，结合ajax等技术，可以渲染出很出色的视觉效果和很棒的用户体验。
　　首先用中文写一下这个效果的算法：
　　1. 使用背景图片的位置切换来获得星级效果；

　　2. 整个效果最要害的地方就是“三层理论”，整个效果分为三层――空分层、分数层和打分层，三层的布局均为absolute，以避免ul本身自带的相对布局（当然用div也可以获得同样效果）；
　　3. 空分层就是使用背景图片中的“空星”作为背景，并横向平铺；
　　4. 分数层的宽度等于（分数*图片宽度）得到的数值，并且使用背景图片中的“分数星（例子中为黄色）”作为背景横向平铺；
　　5. 打分层就是将5个空链接置于5个星星的位置上（宽度要和背景图片吻合），并将5个a：hover的背景设为“打分星（这里为绿色）”，宽度设为星数*图片宽度，left为0(靠左，这样结合a：hover不同的宽度就可以出现打分效果)，垂直坐标小于a的垂直坐标（以确保当前a：hover不会遮挡住其他链接）；

　　我们看看xhtml代码：

示例代码 [www.CuoXIn.com]

上一篇：CSS布局中常用的CSS图像置换、图片替代的方法举例

下一篇：如何用CSS实现翻页效果？

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注

新闻热点

最牛同桌！我考了696分我同桌考了703分

2024-06-26 22:28:41

650分！高二女生考入北大：遗憾不能上高三

2024-06-26 22:26:16

男生估分600只考了397 妈妈：高考虽重要，但不代表所有

2024-06-26 22:23:01

唐尚珺回应是否会直播带货：有人出100万想和他合作！

2024-06-25 19:29:23

名校抢人名场面：清华、北大太拼了！

2024-06-25 19:22:14

男生高考语文满分！网友：第一次听说

2024-06-25 19:19:15

疑难解答

图片精选

网友关注