CSS仿大众点评星星样式

收藏

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

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

查看演示

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

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

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