CSS 创建一个5星级技能评级栏

一个5星级技能评级栏对于任何展示评级和成就的个人网站都是必不可少的元素。该评级栏具有响应式设计，可在各种设备上使用。在这里，我们使用单选按钮来创建评级栏。

步骤

创建一个包含头部和主体部分的HTML文档。
使用CSS设置主体部分的背景颜色，并将内容居中。
使用字体大小、方向和显示属性来为评级元素设置样式。
隐藏单选按钮，并为标签元素设置样式以将其显示为块级元素。
使用CSS和:hover、:checked和~选择器为标签元素添加交互效果。
在主体部分创建一个具有rating类的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来向评分栏添加更多交互功能，比如显示当前评分或在用户提交评分后显示消息。