用css制作星级评分

下面是用CSS制作星级评分的完整攻略。

1. 确定HTML结构

首先，需要为星级评分定义一个HTML结构。一般来说，使用无序列表（ul）和列表项（li）来实现星级评分。每个列表项代表一个星星，通过列表项的class属性来控制星级的样式和状态。

例如，以下是一个基本的HTML结构：

<ul class="rating">
  <li class="star"></li>
  <li class="star"></li>
  <li class="star"></li>
  <li class="star"></li>
  <li class="star"></li>
</ul>

其中，ul元素的class属性用于指定整个星级评分的样式，li元素的class属性用于指定星星的样式和状态。

2. 定义基本样式

接下来，需要为星级评分定义一些基本样式，如星星的颜色、大小、边框等。同时还需要定义未选中状态和选中状态的样式。

例如，以下是一些基本的CSS样式：

ul.rating {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.rating li {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  background: url(star.png) no-repeat left top;
  text-indent: -9999px;
}

ul.rating li.star {
  background-position: left top;
}

ul.rating li.star.selected {
  background-position: left bottom;
}

其中，ul.rating样式用于设置整个星级评分的基本样式，ul.rating li样式用于设置星星的基本样式，ul.rating li.star样式用于表示未选中状态的星星样式，ul.rating li.star.selected定义了被选中的星星样式。

在上面的CSS样式中，我们使用了一个星型图片star.png，并通过background属性设置了星星的背景图案。其中，ul.rating li.star使用图案的顶部部分，ul.rating li.star.selected使用图案的底部部分，这样就能够实现选中状态的效果。

3. 使用JavaScript实现交互效果

通过上面的CSS样式，我们已经成功地定义了星级评分的样式。但是，需要通过JavaScript来实现鼠标滑过和点击的交互效果。

例如，以下是一个使用jQuery库实现星级评分交互效果的示例：

$('ul.rating li').hover(
  function() {
    $(this).prevAll().addBack().addClass('hover');
  },
  function() {
    $(this).prevAll().addBack().removeClass('hover');
  }
);

$('ul.rating li').click(function() {
  $(this).prevAll().addBack().addClass('selected');
  $(this).nextAll().removeClass('selected');
});

其中，使用了jQuery的hover方法和click方法来分别处理鼠标滑过和点击事件。hover方法接受两个函数作为参数，第一个函数用于处理鼠标进入时的事件，第二个函数用于处理鼠标离开时的事件。通过$(this)获取当前li元素，再使用prevAll()方法获取它前面的所有元素，使用addBack()方法将它自己也加入选中的元素列表中，最后使用addClass()方法和removeClass()方法来控制元素的样式。

在click方法中，使用了类似的方法来实现点击事件的效果。首先，将当前元素和它前面的所有元素添加selected类，表示它们被选中。然后，将当前元素后面的所有元素移除selected类，表示它们未被选中。

示例应用

下面举两个示例来展示如何应用星级评分：

示例1：使用Font Awesome字体库

如果你已经使用了Font Awesome字体库，可以直接使用它提供的星星图标来实现星级评分。只需要在li元素上添加正确的Font Awesome样式即可。例如：

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

其中，fa-star表示整个星星，fa-star-half表示半个星星，fa-star-o表示未选中的星星。可以根据需求使用不同的图标组合来实现不同的评分效果。

示例2：使用CSS渐变效果

如果你想要添加渐变效果，可以使用CSS的渐变属性。例如，以下是一个使用线性渐变实现星级评分的示例：

ul.gradient-rating li {
  background: -moz-linear-gradient(top, #FFDA44 5%, #FFDA44 5%, #FFFFFF 5%, #FFFFFF 100%);
  background: -webkit-linear-gradient(top, #FFDA44 5%,#FFDA44 5%,#FFFFFF 5%,#FFFFFF 100%);
  background: linear-gradient(to bottom, #FFDA44 5%,#FFDA44 5%,#FFFFFF 5%,#FFFFFF 100%);
  border-top: 1px solid #D6D6D6;
  border-right: 1px solid #D6D6D6;
  border-bottom: 1px solid #D6D6D6;
}

ul.gradient-rating li:last-child {
  border-right: none;
}

其中，使用了CSS渐变属性来设置星星的渐变效果，保存评分的序号，都是和前面定义的样式一样的，只是换了背景色。同时，为了显示出星星之间的间隔，加上了一些边框样式。

这个实现方式虽然比较复杂，但可以满足一些更加复杂的设计需求。