评分星星的CSS

来源：互联网发布：迅雷5 for mac下载编辑：程序博客网时间：2024/04/30 09:54

Star Rating

1점

2점

3점

4점

5점

6점

7점

8점

9점

10점

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 -->