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