评价星级（星星）

最新推荐文章于 2021-06-03 16:03:08 发布

一个很酷的人

最新推荐文章于 2021-06-03 16:03:08 发布

阅读量4.5k

点赞数 4

分类专栏： css 文章标签：商品评价星级

本文链接：https://blog.youkuaiyun.com/Hi_Boy_/article/details/81977773

版权

css 专栏收录该内容

6 篇文章

订阅专栏

直接上代码，把下面的css和html 直接复制到jsp中就可使用，

通过改变<i>标签中的class样式来控制星星个数：

class="star-on-png" 代表一星

class="star-half-png" 代表半颗星

class="star-off-png" 代表零颗星

效果图：（颜色可通过修改下面css中的颜色属性任意修改，大小可通过修改下面css中的字体font-size:1.3em;来改变）

一、css

<style type="text/css">
    .cancel-off-png,.cancel-on-png,.star-half-png,.star-off-png,.star-on-png {
        font-size:1.3em;
        -moz-osx-font-smoothing:grayscale;
        -webkit-font-smoothing:antialiased;
        font-family:FontAwesome;
        font-style:normal;
        font-variant:normal;
        font-weight:400;
        line-height:1;
        speak:none;
        text-transform:none;
        color:#777
    }
    .star-on-png {
        color:#FEB902
    }
    .star-on-png:before {
        content:"\f005"
    }
    .star-off-png {
        color:#777
    }
    .star-off-png:before {
        content:"\f006"
    }
    .star-half-png {
        color:#FEB902

    }
    .star-half-png:before {
        content:"\f123"
    }
</style>

二、HTML页面标签

                            <i  class="star-on-png" ></i>&nbsp;
                            <i  class="star-on-png" ></i>&nbsp;
                            <i  class="star-half-png" ></i>&nbsp;
                            <i  class="star-off-png"></i>&nbsp;
                            <i  class="star-off-png"></i>