简单的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 >

转载于:https://www.cnblogs.com/joys/archive/2009/12/03/1616179.html