Star Rating
CSS Code
1 | /* UI Object */ |
2 | .star_rating, |
3 | .star_rating span{ display :inline- block ; overflow : hidden ; height : 14px ; height : 14px ; background : transparent url (img/ico_star.gif) no-repeat } |
4 | .star_rating{ width : 79px ; vertical-align : middle } |
5 | .star_rating span{ background-position : 0 -14px ; font-size : 0 ; line-height : 0 ; text-indent : -100px ;* text-indent : 0 ; vertical-align : top } |
6 | /* //UI Object */ |
HTML Code
01 | <!-- UI Object --> |
02 | < h1 >Star Rating</ h1 > |
03 | < p >< span class = "star_rating" >< span style = "width:10%" >1점</ span ></ span ></ p > |
04 | < p >< span class = "star_rating" >< span style = "width:20%" >2점</ span ></ span ></ p > |
05 | < p >< span class = "star_rating" >< span style = "width:30%" >3점</ span ></ span ></ p > |
06 | < p >< span class = "star_rating" >< span style = "width:40%" >4점</ span ></ span ></ p > |
07 | < p >< span class = "star_rating" >< span style = "width:50%" >5점</ span ></ span ></ p > |
08 | < p >< span class = "star_rating" >< span style = "width:60%" >6점</ span ></ span ></ p > |
09 | < p >< span class = "star_rating" >< span style = "width:70%" >7점</ span ></ span ></ p > |
10 | < p >< span class = "star_rating" >< span style = "width:80%" >8점</ span ></ span ></ p > |
11 | < p >< span class = "star_rating" >< span style = "width:90%" >9점</ span ></ span ></ p > |
12 | < p >< span class = "star_rating" >< span style = "width:100%" >10점</ span ></ span ></ p > |
13 | <!-- //UI Object --> |