Question

我环顾四周，无法编写基于5星评级系统的CSS代码，该系统将根据客户反馈进行更改。任何帮助表示赞赏。

Answer 1

您可以尝试定位的精灵表：

HTML：

<div class="rating one-star"></div>

CSS：

.rating
{
  background-image: url(stars.png);
  background-repeat: no-repeat;
  height: 20px;
  width: 100px;
}

/* assume a star is 20x20 */

.one-star
{
  background-position: -80px 0;
}
.two-star
{
  background-position: -60px 0;
}
.three-star
{
  background-position: -40px 0;
}
.four-star
{
  background-position: -20px 0;
}
.five-star
{
  background-position: 0 0;
}

当然，您可能希望div包含5个带有星轮廓，悬停效果或其他此类内容的链接。这真的取决于你在寻找什么。

Answer 2

正如提到的那样，你可能想要研究一下javascript解决方案。

Example of a jquery plugin

CSS帮助看星星

2 个答案: