用钢性铸铁制作星级评分第1/3页

原文：使用半铸钢钢性铸铁(Cast Semi-Steel)创建星级评核人链接：http://科莫多媒体。com/blog/index。PHP/2005/08/24/creating-a-star-rater-use-CSS/版权：版权归原作者所有，翻译文档版权归本人|格林南，和蓝色创意。先看看效果step 1: XHtmlul class='星级' lia href=' # ' title='将这一颗星评为5颗星类='一颗星1/a/li lia将这2颗星评为5颗星类='三星3/a/li lia将这四颗星评为5颗星'这里只介绍静态的技术，随后会给出系统的应用，你也是自己加程序来尝试一下，还可以采用创建交互式、快速动态网页应用的网页开发技术来做出绚丽的效果步骤2:图像|图形为了节省您的空间和宽带，我们采用可交换的图像格式图，这个图片就是打分的按钮

图步骤3:CSS .星级{ list-style:无；/*关闭默认列表图像项目符号*/margin : 3px；/*我不想在这东西周围留有空间*/padd : 0px；/*我是肛门。我很确定开环（同Open Loop）的默认填充是0px，但是为了安全起见，我们将它设置为0px */宽度： 100px/*此列表为5颗星，每颗星为20px，因此应为5 x 20px=100px宽*/高： 20px/*每颗星的高度为20像素.由于这是一个水平列表，我们将把列表高度设置为星星的高度*/position:相对；/*非常重要。我们稍后将使用绝对定位。我们想用相对-绝对定位*/后台： URL(星级。gif)左上角重复-x；/*通过水平重复此图像，列表将显示为五星。*/}根据代码我们知道：去掉了保险商实验所的边缘和填料以及列表式的，定义了高20px宽100像素的一个区块下来时按钮元素的制作，下面是css .星级Li { padd :0 px/*完全没有填充*/边距：0 px/*完全没有边距*//* \ */*反斜杠黑客，这导致IE5 Mac看不到这个规则*/float:左；/*对于任何其他浏览器，我们将向左浮动，这将形成一个水平列表*//* *//*结束IE5反斜杠攻击*/}这段代码让里实现横向排放，并解决IE5 MAC bug继承上面的按钮元素样式，再定义鼠标动作，下面是css。星级阿利{ display:block/*我们想要一个块状物品，这样我们就可以弄乱它的高度和宽度*/宽度：20 px/*简单的东西，我们希望宽度与星形宽度相同*/高： 20px/*与宽度相同*/text-装饰：无；/*删除链接的下划线*/text-缩进：-9000 px；/*使用【网址=http://www。迈佐布鲁。com/tests/reviewed-image-replacement/]图像替换技术[/url]将文本从屏幕上缩进，我们不想再看到文本*/z-指数： 20；/*我们会回到这个位置*/绝对位置：/*我们现在可以控制每颗恒星的精确x和y坐标，相对于母体UL */padd : 0px；/*同样，我们不需要任何填充*/background-image :无；/*我们不会显示星号*/} 13。星级li a:hover{ 14 .背景：网址(星级。gif)左下方；/*这就是魔力所在*/15。z-index : 1；/*将此星形移动到z指数堆栈的底部*/16。left: 0px/*将此星形一直向左移动，与(美)保险商实验所(Underwriters' Laboratories)父项目的一侧对齐*/17。}下来我们要考虑怎样才能显示不同的星级，三星？四星？原理是什么，我们继续将背景图片横向重复显示，然后定义a和a:hover的宽度来区分选择的星级。下面是CSS . star-评级a。一星{ left: 0px}。星级a .一星：悬停{宽度：20 px}.星级a。二星{ left:20px}。星级a .双星：悬停{宽度： 40px} .星级a。三星级{ left: 40px}。星级a。三星stars : hover { width : 60px }。星级a。四星{ left: 60px}。星级a。四星stars : hover { width : 80px }。星级a。五星{ left: 80px}。星级a。五星stars : hover { width : 100 px }到此，这个制作完成123下一页阅读全文