评价星级（星星）

版权声明：本文为博主原创文章，如需转载请附上原文链接。 https://blog.csdn.net/Hi_Boy_/article/details/81977773

直接上代码，把下面的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>