html五角星评分代码

HTML五角星评分代码

html>
    head>
    style>
/* 定义五角星样式 */.star{
        display:inline-block;
        width:0;
        height:0;
        margin:4px 4px 0 0;
        border-right:20px solid transparent;
        border-bottom: 13px solid #fc0;
        border-left: 20px solid transparent;
        transform: rotate(35deg);
}
.star:before{
        content:'';
        display:block;
        width:0;
        height:0;
        margin:-13px 0 0 -20px;
        border-right:20px solid transparent;
        border-bottom: 13px solid #fc0;
        border-left: 20px solid transparent;
        transform: rotate(-70deg);
}
/* 定义星级评分样式 */.star-rating{
        font-size:40px;
}
.star-rating input[name='star']{
        display:none;
}
.star-rating label{
        color: #bbb;
        font-size: 40px;
}
.star-rating input[name='star']:checked + label{
        color: #fc0;
}
    /style>
    /head>
    body>
    div class="star-rating">
        input type="radio" name="star" id="star1" value="5" />
        label for="star1" class="star">
    /label>
        input type="radio" name="star" id="star2" value="4" />
        label for="star2" class="star">
    /label>
        input type="radio" name="star" id="star3" value="3" />
        label for="star3" class="star">
    /label>
        input type="radio" name="star" id="star4" value="2" />
        label for="star4" class="star">
    /label>
        input type="radio" name="star" id="star5" value="1" />
        label for="star5" class="star">
    /label>
    /div>
    /body>
    /html>
    

通过以上代码实现了一个带五角星评分的评级系统，用户可以通过点击星级评分进行评分，评分值在1-5之间。这一评级系统兼容各种主流浏览器，而且使用非常灵活简单，可以应用于各类网站中。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！