CSS仿淘宝星星打分样式

收藏

分享一套来自淘宝的星星打分样式，你可以很简单的应用到星星评级页面里面。代码很简单，只要定位星星背景图坐标即可。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

从0到10不同级别的星星代码

<span class='c-value-no c-value-4d0'><em></em></span>
<span class='c-value-no c-value-4d1'><em></em></span>
<span class='c-value-no c-value-4d2'><em></em></span>
<span class='c-value-no c-value-4d3'><em></em></span>
<span class='c-value-no c-value-4d4'><em></em></span>
<span class='c-value-no c-value-4d5'><em></em></span>
<span class='c-value-no c-value-4d6'><em></em></span>
<span class='c-value-no c-value-4d7'><em></em></span>
<span class='c-value-no c-value-4d8'><em></em></span>
<span class='c-value-no c-value-4d9'><em></em></span>
<span class='c-value-no c-value-4d10'><em></em></span>

CSS

定位星星背景图片坐标

span.c-value-no{display: block} 
.c-value-no,.c-value-no em{background:url("star.png") -66px -12px repeat;height:12px;width:58px;display:inline-block; font-size:0;line-height:0;text-align: left}
 .c-value-no em{background-position:-66px 0;} 
.c-value-4d0 em{width:0;}.c-value-4d1 em{width:5px;}
 .c-value-4d2 em{width:12px;}
.c-value-4d3 em{width:17px;} 
.c-value-4d4 em{width:24px;}
.c-value-4d5 em{width:29px;}
 .c-value-4d6 em{width:36px;}
.c-value-4d7 em{width:41px;}
 .c-value-4d8 em{width:48px;}
.c-value-4d9 em{width:53px;}
 .c-value-4d10 em{width:60px;}