星星评分系统html与css代码

以下是一个简单的星星评分系统的 HTML 与 CSS 代码示例：

HTML 代码：

<div class="rating">
  <input type="radio" id="star5" name="rating" value="5">
  <label for="star5"></label>
  <input type="radio" id="star4" name="rating" value="4">
  <label for="star4"></label>
  <input type="radio" id="star3" name="rating" value="3">
  <label for="star3"></label>
  <input type="radio" id="star2" name="rating" value="2">
  <label for="star2"></label>
  <input type="radio" id="star1" name="rating" value="1">
  <label for="star1"></label>
</div>

CSS 代码：

.rating {
  display: inline-block;
  position: relative;
  height: 1em;
  font-size: 1em;
  line-height: 1;
}

.rating input {
  display: none;
}

.rating label {
  display: inline-block;
  position: absolute;
  cursor: pointer;
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  background: url('https://cdn.jsdelivr.net/gh/linxz/img-repo/images/star.png') no-repeat;
}

.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
  background-position: 0 0;
}

该代码使用了 `input` 标签的 `type` 属性为 `radio`，并且为每个评分选项设置了不同的 `id` 和 `value` 属性，同时为每个选项设置了 `label` 标签，其中的 `for` 属性与对应的 `input` 标签的 `id` 属性相同，以实现点击标签即可选择对应的评分选项。CSS 代码则定义了星星评分的外观，包括星星的背景图片、鼠标悬停和选中状态下的星星外观等。您可以根据自己的需求修改这个代码，并将其嵌入到您的网页中。