简单的css实现星星等级评分
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简单的css实现星星等级评分</title>
<style type="text/css">
.star{margin:0;font-size:0;width:156px;height:24px;position:relative;background:url(http://images.cnblogs.com/cnblogs_com/joys/star_rating.png) repeat-x;}
.star a{height:24px;display:-moz-inline-box;*display:inline;zoom:1;text-indent:-999px;overflow:hidden;left:0;top:0;position:absolute}
.star a:hover{background:url(http://images.cnblogs.com/cnblogs_com/joys/star_rating.png) repeat-x 0 -60px;}
.star .s1{width:26px;z-index:6}
.star .s2{width:52px;z-index:5}
.star .s3{width:78px;z-index:4}
.star .s4{width:104px;z-index:3}
.star .s5{width:130px;z-index:2}
.star .s6{width:156px;z-index:1}
</style>
</head>
<body>
<div class="star">
<a href="#" class="s1" title="一颗星">star1</a>
<a href="#" class="s2" title="二颗星">star2</a>
<a href="#" class="s3" title="三颗星">star3</a>
<a href="#" class="s4" title="四颗星">star4</a>
<a href="#" class="s5" title="五颗星">star5</a>
<a href="#" class="s6" title="六颗星">star6</a>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简单的css实现星星等级评分</title>
<style type="text/css">
.star{margin:0;font-size:0;width:156px;height:24px;position:relative;background:url(http://images.cnblogs.com/cnblogs_com/joys/star_rating.png) repeat-x;}
.star a{height:24px;display:-moz-inline-box;*display:inline;zoom:1;text-indent:-999px;overflow:hidden;left:0;top:0;position:absolute}
.star a:hover{background:url(http://images.cnblogs.com/cnblogs_com/joys/star_rating.png) repeat-x 0 -60px;}
.star .s1{width:26px;z-index:6}
.star .s2{width:52px;z-index:5}
.star .s3{width:78px;z-index:4}
.star .s4{width:104px;z-index:3}
.star .s5{width:130px;z-index:2}
.star .s6{width:156px;z-index:1}
</style>
</head>
<body>
<div class="star">
<a href="#" class="s1" title="一颗星">star1</a>
<a href="#" class="s2" title="二颗星">star2</a>
<a href="#" class="s3" title="三颗星">star3</a>
<a href="#" class="s4" title="四颗星">star4</a>
<a href="#" class="s5" title="五颗星">star5</a>
<a href="#" class="s6" title="六颗星">star6</a>
</div>
</body>
</html>
