收藏本站 收藏本站
积木网首页 - 技术学院 - 软件测试 - 网站黄页 - 常用手册 - 站长工具 - 技术社区
首页 > CSS/HTML > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

用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;
}

到此,这个制作完成

em px的关系
情况是这样的,css里常用的两种定义字体大小的单位:em,px。em是一个相对数,比如1.1em就表示1.1个字符宽度,而这个字符宽度是根据font-size来初始化大

95%的中国网站需要重写CSS
很长一段时间,我都使用12px作为网站的主要字体大小。10px太小,眼睛很容易疲劳,14px虽容易看清,却破坏页面的美感。唯独12px在审美和视力方面都恰

在iframe中隐藏横向滚动条的方法大全
在iframe中隐藏横向滚动条。。删除DM中自动生成的!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"此句代码.body中这样写:bodystyle=

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的! 友情链接:b2b电子商务
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号