来看看：CSS实例教程:CSS制造星级评价的功效

更好的控制页面布局。不用多说。
网页制造poluoluo文章简介：做一个星级评价的功效不是很难，可是要纯真用CSS写估量就有点难度了.
做一个星级评价的功效不是很难，可是要纯真用CSS写估量就有点难度了，先来个截图：

登录/注册后可看大图

效果很复杂，大概如今您如今头脑里已有完成的思绪了。上面先看一下我们一般情形下的完成办法：
CSS：
以下为援用的内容：
.jsstar
{list-style:none;
margin:0px;
padding:0px;
width:100px;
height:20px;
position:relative;

}
.jsstarli
{
padding:0px;
margin:0px;
float:left;
width:20px;
height:20px;
background:url(star_rating.gif)00no-repeat;
}

HTML：
以下为援用的内容：
<p>Javascript+CSS完成</p>
<ulclass="jsstar">
<lititle="一星"></li>
<lititle="二星"></li>
<lititle="三星"></li>
<lititle="四星"></li>
<lititle="五星"></li>
</ul>
JS：（我用的是jquery）
以下为援用的内容：
<scripttype="text/javascript"src="jquery-1.3.1.js"></script>

<scripttype="text/javascript">
$(document).ready(function(){
$(".jsstar>li").hover(
function(){$(this).css({"background-position":"leftbottom"}).prev().trigger("mou搜索引擎优化ver")},
function(){$(this).css({"background-position":"lefttop"}).prev().trigger("mou搜索引擎优化ut")})
.click(function(){alert($(this).attr("title"))});
});
</script>

这里是最终效果：
这里是最终效果：

登录/注册后可看大图

是否是和下面的没甚么区分，但是又一想假如用户禁失落了javascript岂不是效果很惨？
因而我们想到了用纯CSS完成，上面是代码：
CSS：
以下为援用的内容：
1/*CSSStarstart*/
2.star-rating
3{
4list-style:none;
5margin:0px;
6padding:0px;
7width:100px;
8height:20px;
9position:relative;
10background:url(star_rating.gif)topleftrepeat-x;
11}
12.star-ratingli
13{
14padding:0px;
15margin:0px;
16float:left;
17}
18.star-ratinglia
19{
20display:block;
21width:20px;
22height:20px;
23text-decoration:none;
24text-indent:-9000px;
25z-index:20;
26position:absolute;
27padding:0px;
28}
29.star-ratinglia:hover
30{
31background:url(star_rating.gif)leftbottom;
32z-index:1;
33left:0px;
34}
35.star-ratinga.one-star
36{
37left:0px;
38}
39.star-ratinga.one-star:hover
40{
41width:20px;
42}
43.star-ratinga.two-stars
44{
45left:20px;
46}
47.star-ratinga.two-stars:hover
48{
49width:40px;
50}
51.star-ratinga.three-stars:hover
52{
53width:60px;
54}
55.star-ratinga.three-stars
56{
57left:40px;
58}
59.star-ratinga.four-stars
60{
61left:60px;
62}
63.star-ratinga.four-stars:hover
64{
65width:80px;
66}
67.star-ratinga.five-stars
68{
69left:80px;
70}
71.star-ratinga.five-stars:hover
72{
73width:100px;
74
75}

HTML：
以下为援用的内容：
<ulclass=star-rating>
<li><ahref=#title=一星class=one-star>1</a></li>
<li><ahref=#title=二星class=two-stars>2</a></li>
<li><ahref=#title=三星class=three-stars>3</a></li>
<li><ahref=#title=四星class=four-stars>4</a></li>
<li><ahref=#title=五星class=five-stars>5</a></li>
</ul>

看看下面CSS的行号您是否是吓了一跳，这么复杂的效果居然用了这么多代码？在我看来不必JS就只能一个效果一个款式了，假如您另有更复杂更炫的效果请指教！
示例代码下载
原文地点：http://www.ckuyun.com/gudao119/archive/2010/01/13/1646428.html
</p>
使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。