使用引导图标纯 HTML 和 CSS 添加星级

星级评分是现代网站和应用程序中广泛使用的功能之一。在这篇文章中，我们将研究如何使用纯 HTML 和 CSS 来创建一个简单但有效的星级评分系统。

HTML 结构

要创建星级评分系统，首先需要设置正确的 HTML 结构。我们将通过使用一个无序列表（ul）作为评分容器，并在每个列表项（li）中添加一个星形图标来完成此操作。

<ul class="rating">
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
</ul>

上述代码中，我们使用 Font Awesome 图标库并使用 "fa fa-star" 类来添加星形图标。

CSS 样式

要使评分系统更加美观，我们需要在 CSS 中添加样式。为了使样式能够应用于我们的 HTML 代码，我们可以将其打包成一个名为 styles.css 的文件。

.rating {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}

.rating li {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
}

.rating li:last-child {
  margin-right: 0px;
}

.rating i {
  font-size: 24px;
  color: #FFCC00;
  transition: all .2s ease-in-out;
}

.rating i:hover,
.rating i:hover ~ i {
  color: #FFC107;
}

在上面的 CSS 代码中，我们设置了一些基本的样式来控制评分系统的外观和行为。我们还使用了转换效果，使鼠标悬停时的图标颜色变化更加柔和。

使用

为了使用这个星级评分系统，您只需要将上面的 HTML 和 CSS 代码添加到您的网页中。然后，您可以更改 HTML 代码中的评级数量以适应您的需求。

<ul class="rating">
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
  <li><i class="fa fa-star"></i></li>
</ul>

请注意，上述代码将创建一个 5 星评分系统，但您可以根据需要增加或减少星级数量。

结论

如您所见，创建漂亮的星级评分系统非常容易，只需要使用纯 HTML 和 CSS。现在您可以将此评分系统添加到您的网站或应用程序中，以增强用户体验并提高客户满意度。