用css制作星级评分第1/3页
原文：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
.star-rating{ list-style: none; /* turn off the default list image bullets*/ margin: 3px; /*I wan't some space around this thing*/ 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*/ width: 100px; /*This list is 5 stars, each star is 20px, therefore it should be 5 x 20px = 100px wide*/ 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.*/ position: relative; /*Very important. We will be using absolute positioning later. We want to use relatively-absolute positioning.*/ 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
.star-rating li{ padding:0px; /* no padding at all*/ margin:0px; /* no margin at all*/ /*\*/ /*Backslash hack, this causes IE5 Mac NOT to see this rule*/ float: left; /* for any other browser, we are going to float left, this makes a horizontal list*/ /* */ /* end the IE5 Backslash hack*/ }
这段代码让li实现横向排放，并解决IE5 MAC bug
继承上面的按钮元素样式，再定义鼠标动作，下面是css
.star-rating li a{ display:block; /* we want a block item, so that we can mess with its height and width*/ width:20px; /* easy stuff, we want the width to be the same as the star width*/ height: 20px; /* same as the width*/ text-decoration: none; /* remove the underline from the link*/ text-indent: -9000px; /* indent the text off the screen using a [url=http://www.mezzoblue.com/tests/revised-image-replacement/]image-replacement technique[/url], we dont want to see the text anymore.*/ z-index: 20; /*we'll come back to this*/ position: absolute; /*we can now control the exact x and y coordinates of each star, relative to the parent UL*/ padding: 0px; /*once again, we don't need any padding*/ background-image:none; /* we will not show the star*/ } 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
.star-rating a.one-star{ left: 0px; } .star-rating a.one-star:hover{ width:20px; } .star-rating a.two-stars{ left:20px; } .star-rating a.two-stars:hover{ width: 40px; } .star-rating a.three-stars{ left: 40px; } .star-rating a.three-stars:hover{ width: 60px; } .star-rating a.four-stars{ left: 60px; } .star-rating a.four-stars:hover{ width: 80px; } .star-rating a.five-stars{ left: 80px; } .star-rating a.five-stars:hover{ width: 100px; }
到此，这个制作完成
当前1/3页 123下一页阅读全文