CSS仿大众点评星星样式

介绍一套从小到大的不同款式的星星代码，有小星星，中等级别的和大星星三种不同尺寸的，通过简单的样式你可以很快的应用到星星评分当中。

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

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

HTML

小星星HTML代码：从半颗星到五颗星

<span class="smallstar10 smallstar"></span> 
<span class="smallstar9 smallstar"></span>  
<span class="smallstar8 smallstar"></span>   
<span class="smallstar7 smallstar"></span> 
<span class="smallstar6 smallstar"></span>  
<span class="smallstar5 smallstar"></span>
<span class="smallstar4 smallstar"></span> 
<span class="smallstar3 smallstar"></span>  
<span class="smallstar2 smallstar"></span>
<span class="smallstar1 smallstar"></span>

CSS

小星星样式

.smallstar10{background:url(../images/stars.png) no-repeat 0 0;}
.smallstar9{background:url(../images/stars.png) no-repeat 0 -17px;}
.smallstar8{background:url(../images/stars.png) no-repeat 0 -34px;}
.smallstar7{background:url(../images/stars.png) no-repeat 0 -51px;}
.smallstar6{background:url(../images/stars.png) no-repeat 0 -68px;}
.smallstar5{background:url(../images/stars.png) no-repeat 0 -85px;}
.smallstar4{background:url(../images/stars.png) no-repeat 0 -102px;}
.smallstar3{background:url(../images/stars.png) no-repeat 0 -119px;}
.smallstar2{background:url(../images/stars.png) no-repeat 0 -136px;}
.smallstar1{background:url(../images/stars.png) no-repeat 0 -153px;}
.smallstar{width:63px;height:12px;}