<ul class="star-rating"> 
<li class="current-rating">Currently 3.5/5 Stars.</li> 
<li><a href="#" title="1 star out of 5" class="one-star">1</a></li> 
<li><a href="#" title="2 stars out of 5" class="two-stars">2</a></li> 
<li><a href="#" title="3 stars out of 5" class="three-stars">3</a></li> 
<li><a href="#" title="4 stars out of 5" class="four-stars">4</a></li> 
<li><a href="#" title="5 stars out of 5" class="five-stars">5</a></li> 
</ul> 

<style> 
.star-rating{/*這里是空分層，用來顯示空星星*/ 
list-style:none; 
margin: 0px; 
padding:0px; 
width: 150px; 
height: 30px; 
position: relative; 
background: url(star_rating2.gif) top left repeat-x;/*空星星位于背景圖片的頂層，將其設為背景并橫向平鋪*/  
} 
.star-rating li{/*設置li的浮動屬性*/ 
padding:0px; 
margin:0px; 
/*\*/ 
float: left; 
/* */ 
} 
.star-rating li a{/*設置a的布局為絕對布局和垂直坐標并隱藏a中文本使其成為空鏈接*/ 
display:block; 
width:30px; 
height: 30px; 
text-decoration: none; 
text-indent: -9000px; 
z-index: 20; 
position: absolute; 
padding: 0px; 
} 
.star-rating li a:hover{/*設置a:hover的背景圖片為打分星/垂直坐標/left為0,注意垂直坐標一定要小于a的垂直坐標*/ 
background: url(star_rating2.gif) left center; 
z-index: 2; 
left: 0px; 
} 

/*以下5個class用來設置5個鏈接的位置和hover的寬度*/ 
.star-rating a.one-star{ 
left: 0px; 
} 
.star-rating a.one-star:hover{ 
width:30px; 
} 
.star-rating a.two-stars{ 
left:30px; 
} 
.star-rating a.two-stars:hover{ 
width: 60px; 
} 
.star-rating a.three-stars{ 
left: 60px; 
} 
.star-rating a.three-stars:hover{ 
width: 90px; 
} 
.star-rating a.four-stars{ 
left: 90px; 
}  
.star-rating a.four-stars:hover{ 
width: 120px; 
} 
.star-rating a.five-stars{ 
left: 120px; 
} 
.star-rating a.five-stars:hover{ 
width: 150px; 
} 

.star-rating li.current-rating{/*設置分數(shù)層的背景和寬度并隱藏文本*/ 
background: url(star_rating2.gif) left bottom; 
position: absolute; 
height: 30px; 
width:105px; 
display: block; 
text-indent: -9000px; 
z-index: 1; 
}  
</style>