评分星星的CSS

最新推荐文章于 2022-03-15 19:27:44 发布

淡如轻风

最新推荐文章于 2022-03-15 19:27:44 发布

阅读量572

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/wenlyli/article/details/10000725

版权

css 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

Star Rating

1점

2점

3점

4점

5점

6점

7점

8점

9점

10점

CSS Code

 
/* UI Object */
 
.star_rating,
 
.star_rating span{display:inline-block;overflow:hidden;height:14px;height:14px;background:transparent url(img/ico_star.gif) no-repeat}
 
.star_rating{width:79px;vertical-align:middle}
 
.star_rating span{background-position:0 -14px;font-size:0;line-height:0;text-indent:-100px;*text-indent:0;vertical-align:top}
 
/* //UI Object */

HTML Code

 
<!-- UI Object -->
 
<h1>Star Rating</h1>
 
<p><span class="star_rating"><span style="width:10%">1점</span></span></p>
 
<p><span class="star_rating"><span style="width:20%">2점</span></span></p>
 
<p><span class="star_rating"><span style="width:30%">3점</span></span></p>
 
<p><span class="star_rating"><span style="width:40%">4점</span></span></p>
 
<p><span class="star_rating"><span style="width:50%">5점</span></span></p>
 
<p><span class="star_rating"><span style="width:60%">6점</span></span></p>
 
<p><span class="star_rating"><span style="width:70%">7점</span></span></p>
 
<p><span class="star_rating"><span style="width:80%">8점</span></span></p>
 
<p><span class="star_rating"><span style="width:90%">9점</span></span></p>
 
<p><span class="star_rating"><span style="width:100%">10점</span></span></p>
 
<!-- //UI Object -->