评分星星的CSS

最新推荐文章于 2024-02-13 23:50:10 发布

原创最新推荐文章于 2024-02-13 23:50:10 发布 · 646 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

css 专栏收录该内容

61 篇文章

订阅专栏

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