T086学习网 | 站长学院 | 技术文档 | 成语 | 歇后语 | 帝国时代 | 代码收藏 | IP地址查询 | 生活百科 | 生日密码 | CSS压缩 | 用户评论 | 欣欣百宝箱

[翻译]用css制作星级评分 I

【 blueidea作者:greengnn 更新时间:2006-03-15 | 字体:
[导读]原文:Creating a Star Rater using CSS 链接:http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/ 版权:版权归原作者所有,翻译文档版权归本人|greengnn,和blueidea。 先看看效果...

原文:Creating a Star Rater using CSS 链接:http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/
版权:版权归原作者所有,翻译文档版权归本人|greengnn,和blueidea。

先看看效果


Step 1: XHTML

 <ul class="star-rating">   
    <li><a href="#" title="Rate this 1 star out of 5" class="one-star">1</a></li>    
    <li><a href="#" title="Rate this 2 stars out of 5" class="two-stars">2</a></li>   
    <li><a href="#" title="Rate this 3 stars out of 5" class="three-stars">3</a></li>   
    <li><a href="#" title="Rate this 4 stars out of 5" class="four-stars">4</a></li>  
    <li><a href="#" title="Rate this 5 stars out of 5" class="five-stars">5</a></li>
 </ul>


这里只介绍静态的技术,随后会给出系统的应用,你也是自己加程序来尝试一下,还可以采用ajax来做出绚丽的效果

Step 2:图像|Graphics

为了节省您的空间和宽带,我们采用gif图,这个图片就是打分的按钮。




Step 3:CSS

1. .star-rating{
2. list-style: none; /* turn off the default list image bullets*/
3. margin: 3px; /*I wan’t some space around this thing*/
4. padding: 0px; /* I’m anal. I’m pretty sure OL’s have a default padding of 0px, but we’ll set it to 0px just to be safe*/
5. width: 100px; /*This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/
6. height: 20px; /* The height of each star is 20px. Since this is a horizontal list, we will set the list height to the height of the star.*/
7. position: relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/
8. background: url(star_rating.gif) top left repeat-x; /* By repeating this image horizontally, the list will appear to have five stars.*/


根据代码我们知道:
去掉了ul的margin和padding以及list-style,定义了高20px宽100px的一个区块

下来时按钮元素的制作,下面是css

1. .star-rating li{
2. padding:0px; /* no padding at all*/
3. margin:0px; /* no margin at all*/
4. /**/ /*Backslash hack, this causes IE5 Mac NOT to see this rule*/
5. float: left; /* for any other browser, we are going to float left, this makes a horizontal list*/
6. /* */ /* end the IE5 Backslash hack*/ 7. }



这段代码让li实现横向排放,并解决IE5 MAC bug

继承上面的按钮元素样式,再定义鼠标动作,下面是css

1. .star-rating li a{
2. display:block; /* we want a block item, so that we can mess with its height and width*/
3. width:20px; /* easy stuff, we want the width to be the same as the star width*/
4. height: 20px; /* same as the width*/
5. text-decoration: none; /* remove the underline from the link*/
6. text-indent: -9000px; /* indent the text off the screen using a image-replacement technique, we dont want to see the text anymore.*/
7. z-index: 20; /*we’ll come back to this*/
8. position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/
9. padding: 0px; /*once again, we don’t need any padding*/
10. background-image:none; /* we will not show the star*/
11. }
12.
13. .star-rating li a:hover{
14. background: url(star_rating.gif) left bottom; /*this is where the magic is*/
15. z-index: 1; /*move this star to the bottom of the z-index stack*/
16. left: 0px; /*move this star all the way to the left, aligned with the side of the UL parent item*/ 17. }



下来我们要考虑怎样才能显示不同的星级,三星?四星?原理是什么,我们继续将背景图片横向重复显示,然后定义a和a:hover的宽度来区分选择的星级。

下面是css

1. .star-rating a.one-star{
2. left: 0px;
3. }
4.
5. .star-rating a.one-star:hover{
6. width:20px;
7. }
8. .star-rating a.two-stars{
9. left:20px;
10. }
11. .star-rating a.two-stars:hover{
12. width: 40px;
13. }
14. .star-rating a.three-stars{
15. left: 40px;
16. }
17. .star-rating a.three-stars:hover{
18. width: 60px;
19. }
20. .star-rating a.four-stars{
21. left: 60px;
22. }
23. .star-rating a.four-stars:hover{
24. width: 80px;
25. }
26. .star-rating a.five-stars{
27. left: 80px;
28. }
29. .star-rating a.five-stars:hover{
30. width: 100px;
31. }


到此,这个制作完成
  • 转载请注明来源:IT学习网 网址:http://www.t086.com/ 向您的朋友推荐此文章
  • 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系我们,我们会尽快予以更正。
更多
留言建议ASP探针PHP探针站长Enjoy的Blog
© 2017 T086学习网 - T086.com(原itlearner.com)
RunTime:6.75ms QueryTime:7