纯CSS绘制星星评分特效

只需要用两个图标即可实现：

starsyellow.png
starsblack.png
实现效果如下：
以下为代码：
  1. <htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>星级评分展示CSS样式技巧</title>
<styletype="text/css">
.vote-star{
display:inline-block;/*内联元素转换成块元素，并不换行*/
margin-right:6px;
width:75px;/*5个星星的宽度*/
height:15px;/*1个星星的高度*/
overflow:hidden;
vertical-align:middle;
background:url(../content/images/group/starsblack.png) repeat-x;}
.vote-star i{
display:inline-block;/*内联元素转换成块元素，并不换行*/
height:15px;/*1个星星的高度*/
background:url(../content/images/group/starsyellow.png) repeat-x 00;}
.vote-number{
vertical-align:middle;
font-family:微软雅黑,Verdana,Geneva, sans-serif;
font-size:12px;}
</style>
</head>
<body>
<divclass="star">
<spanclass="vote-star"><istyle="width:97%"></i></span><spanclass="vote-number">9.7分</span>
</div>
</body>
</html>

     

在项目中，可以将span标签换成div都可以
 





 

posted @ 2015-05-05 14:27  专注前端开发3-5年  阅读(2411)  评论(0)  编辑  收藏  举报