Live Brilliant

CSS 별표 평점표시 본문

개발은 핵찜이야/HTML/CSS

CSS 별표 평점표시

주인정 2012. 4. 13. 17:55

*****test.html 소스보기*****
<link href="star.css" rel="stylesheet">
<div class="grade"> <span style="width:50%"></span> </div>

*****star.css소스보기*****
.grade {
MARGIN-TOP: 1px; DISPLAY: inline; BACKGROUND: url(bggray.gif) repeat-x; FLOAT: left; OVERFLOW: hidden; WIDTH: 65px; HEIGHT: 13px
}
.grade SPAN {
BACKGROUND: url(bgcolor.gif) repeat-x; FLOAT: left; HEIGHT: 13px
}

-------------------------------------------
우선은 평점주는 이미지는 스타일로 적용됩니다.

이미지는 회색의 백그라운드 이미지와 노란색칼라 이미지 2개가 필요하고요.

<div class="grade"> 이부분은 회색의 백그라운드 이미지가 들어가는 부분이고,
<span style="width:50%">이부분은 노란색칼라 이미지가 들어가는 부분입니다.

점수에 따라서 width를 조정하면 됩니다.
(예 : 평점 90점이면 <span style="width:90%">이 되겠지요.)

 

Comments