使用CSS创建一个五星技能评分栏

ID:13116 / 打印

使用css创建一个五星技能评分栏

5 星技能评级栏是任何作品集网站展示评级和成就的基本要素。评级栏响应灵敏，可在各种设备上使用。在这里，我们使用单选按钮来创建评级栏。

算法

创建一个包含头部和正文部分的 HTML 文档。
使用 CSS 设置背景颜色并将正文内容居中。
使用字体大小、方向和显示属性设置评级元素的样式。

立即学习“前端免费学习笔记（深入）”；
隐藏单选按钮并设置标签元素的样式以将其显示为块。
使用 CSS 通过 :hover、:checked 和 ~ 选择器向标签元素添加交互性。
在正文部分创建一个带有评级类的 div 元素。
添加五个具有不同值和 ID 的无线输入元素。
添加五个标签元素，其中包含星号的文本内容以及与相应的单选输入 ID 相匹配的属性。

示例

<!DOCTYPE html> <html> <head>   <title>5-Star Skills Rating Bar</title>   <!-- The following CSS styles the rating bar and allows for customization -->   <style>     /* The body is styled to center the rating bar and give it a background color */     body {       display: flex;       justify-content: center;       align-items: center;       height: 100vh;       background-color: #a2f9ff;     }     /* The rating class is used to style the rating bar and make it responsive */ .rating {   font-size: 0; /* Remove any font size */   direction: rtl; /* Set direction to right-to-left for proper star display */ }  /* Hide the radio input element of the rating bar */ .rating input {   display: none; }  /* Style the label elements to display as stars and to allow for interactivity */ .rating label {   display: inline-block;   width: 20px;   height: 20px;   margin: 0;   padding: 0;   font-size: 24px;   text-align: center;   line-height: 20px;   cursor: pointer;   color: #ccc;   transform: rotateY(180deg); /* Flip the star to display properly */ }  /* Style the label elements when hovered over or checked */ .rating label:hover, .rating label:hover ~ label, .rating input:checked ~ label {   color: #f90; /* Change the color of the star to yellow when hovered over or checked */ } </style> </head> <body>   <!-- The rating class is used to create the rating bar using radio input elements and labels -->   <div class="rating">     <input type="radio" name="rating" id="rating-1" value="1" />     <label for="rating-1">★</label>     <input type="radio" name="rating" id="rating-2" value="2" />     <label for="rating-2">★</label>     <input type="radio" name="rating" id="rating-3" value="3" />     <label for="rating-3">★</label>     <input type="radio" name="rating" id="rating-4" value="4" />     <label for="rating-4">★</label>     <input type="radio" name="rating" id="rating-5" value="5" />     <label for="rating-5">★</label>   </div> </body> </html>

开发人员可以使用其他输入类型（例如范围滑块、复选框或文本输入）来代替使用单选按钮，以允许用户提供更详细的反馈。

对于需要不同评级等级的网站，开发人员可以修改 CSS 样式和 HTML 标记以适应不同的评级选项。 JavaScript 可用于向评级栏添加更多交互功能，例如显示当前评级或在用户提交评级后显示消息。