用css制作星级投票评分功能
作者:greengnn 来源:蓝色理想 发布时间:2008-01-08 21:12:00
标签:评分,星级,css
原文:
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>
这里只介绍静态的技术,PHP系统的应用请看,你也是自己加程序来尝试一下,还可以采用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;
}
到此,这个制作完成
0
投稿
猜你喜欢
- 备注: 关于label和tag,在中文中都翻译成标签,而下文中出现的标签,都是对label的翻译,比如”用户名”+输入框, 这里的”用户名”
- 许多人在编写程序的时候因为贪图方便或不小心使用到程式的保留字,有时明明程序没有错,就是无法正确执行。您知道有哪些常见的保留字吗? 下面的都是
- 使用WSH调用系统的Ping命令,将Ping的结果重定向到一个文本文件中去,再把文本文件显示到网页中具体做法如下:首先, 建一个.BAT文件
- SQL*DBA命令的安全性: 如果您没有SQL*PLUS应用程序,您也可以使用SQL*DBA作SQL查权限相关的命令只能分配给Oracle软
- 对于个人网站来说,受到建站条件的制约,Access数据库成了广大个人网站站长的首选。然而,Access数据库本身存在很多安全隐患,攻击者一旦
- 从技术上来说,在ASP环境中,读入并管理XML文本的主要方法有三种: 创建MSXML对象,并且将XML文档载入DOM; 使用服务器端嵌入(S
- 1、汉语分词的由来使用ASP开发的中小企业的网站,对于站内搜索,往往只是简单的通过SQL语句匹配数据库。对于比较短的词语搜索,这个方法是有效
- sql server的备份与恢复(查询分析器) 查询分析器: 命令: 1:备份数据库命令: backup database whdb1(要备
- 一直以来,jQuery是我最喜欢的框架之一。1月14号 1.4 Released版本发布后,就迫不及待去了解了一下1.4版本对比以往1.3.
- 有两个结构完全相同的表,由其中一个表插入另一个表中指定条件的数据,报如下错误: 仅当使用了列列表并且 IDENTITY_INSERT 为 O
- 请按步骤进行,未进行前面的步骤时,请不要做后面的步骤,以免损坏你的数据库.一般不建议做第4,6两步,第4步不安全,有可能损坏数据库或丢失数据
- [参与测试的浏览器:IE6 / IE7 / IE8 / FF3 / OP10 / SF4 / Chrome2 ][操作系统:Windows]
- 今天下午主要做了个实验,是针对 测试表的列,进行添加,修改,删除的。做法如下: 增加一列: alter table emp4 add tes
- 酝酿了将近一个春夏秋冬的腾讯网首页终于亮剑!反响热烈!让我们来分享它成功背后的酸甜苦辣吧。腾讯网首页改版终于开花结果。于2008年3月25日
- function createobj() { if (window.ActiveXObject)&n
- 1、从半年以前要“去中心化”开始,豆瓣作了不少大的调整,重要的是上线了很多的新功能。同城、日记、相册、音乐试听、等等。2、一个多月来,豆瓣上
- 代码如下:CREATE PROCEDURE page @tblName varchar(255), -- 表名 @strGetF
- 今天同事 明城 在项目中碰到一个 BUG,代码具体如下:<!DOCTYPE html PUBLIC "-//W3C//DTD
- 一直在用JS写ASP,也不是特别原因,只是当初学的是JS,后来学ASP时知道ASP也可以用JS写,就没去学VBS.前几个月刚学ASP的时候找
- 1、HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Services\Eventlog\Applicatio