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

cssweb developmentfront end technology更新于 2024/12/19 13:00:17

五星技能评分栏是任何作品集网站展示评分和成就的必备元素。该评分栏响应式设计，可在各种设备上使用。这里，我们使用单选按钮创建了评分栏。

算法

创建一个包含 head 和 body 部分的 HTML 文档。
使用 CSS 设置背景颜色并将 body 内容居中。
使用字体大小、方向和显示属性设置评分元素的样式。
隐藏单选按钮，并设置标签元素的样式，使其显示为块。
使用 CSS 的 :hover、:checked 和 ~ 选择器为标签元素添加交互性。
在 body 部分创建一个带有 ratings 类的 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>
    /* 主体样式设置为将评级栏居中，并赋予其背景颜色 */
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #a2f9ff;
    }
    /* 评级类用于设置评级栏的样式并使其响应式 */
.rating {
    font-size: 0; /* 移除所有字体大小 */
    direction: rtl; /* 将方向设置为从右到左，以便正确显示星星 */
}

/* 隐藏评级栏的单选输入元素 */
.rating input {
    display: none;
}

/* 设置标签元素的样式，使其显示为星星并允许交互 */
.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); /* 翻转星星以使其正确显示 */
}

/* 设置鼠标悬停或选中时标签元素的样式 */
.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
  color: #f90; /* 当鼠标悬停或选中时，将星星的颜色更改为黄色 */
}
</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 可用于为评分栏添加更多交互功能，例如显示当前评分或在用户提交评分后显示消息。