码迷,mamicode.com
首页 > Web开发 > 详细

纯CSS绘制星星评分特效

时间:2015-05-05 16:00:55      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

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

技术分享
技术分享
实现效果如下:
技术分享
以下为代码:
  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都可以
 





 

纯CSS绘制星星评分特效

标签:

原文地址:http://www.cnblogs.com/cnchenjunbiao/p/4479053.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!