CSS仿淘宝星星打分样式

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

分类：html/css > 图形难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

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