HTML原生评分组件，带星星

最新推荐文章于 2024-08-09 07:40:40 发布

yf_d

最新推荐文章于 2024-08-09 07:40:40 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签：评分组件 HTML CSS

本文链接：https://blog.youkuaiyun.com/u010913414/article/details/107855816

版权

本文展示了如何使用HTML原生代码创建一个简单的评分组件，包括效果图和具体实现代码。虽然评分提示的CSS未详细说明，但可以根据个人需求自行添加。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：用原生写的，很简单的评分。

下面是具体代码，很简单，评分提示没有写css，因为看个人喜好吧，需要就用，不需要就不用显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>Document</title>
</head>
<style>
    #score__component {
        width: 60%;
        transition: all 300ms;
        margin-left: 20%;
        text-align: center;
        background-color: #f