论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

用CSS打造评分星级效果的一个实例

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:45

  用纯css打造星级评分效果正在被越来越多地应用在网络中,结合ajax等技术,可以渲染出很出色的视觉效果和很棒的用户体验。
  首先用中文写一下这个效果的算法:
  1. 使用背景图片的位置切换来获得星级效果;


  2. 整个效果最要害的地方就是“三层理论”,整个效果分为三层——空分层、分数层和打分层,三层的布局均为absolute,以避免ul本身自带的相对布局(当然用div也可以获得同样效果);
  3. 空分层就是使用背景图片中的“空星”作为背景,并横向平铺;
  4. 分数层的宽度等于(分数*图片宽度)得到的数值,并且使用背景图片中的“分数星(例子中为黄色)”作为背景横向平铺;
  5. 打分层就是将5个空链接置于5个星星的位置上(宽度要和背景图片吻合),并将5个a:hover的背景设为“打分星(这里为绿色)”,宽度设为星数*图片宽度,left为0(靠左,这样结合a:hover不同的宽度就可以出现打分效果),垂直坐标小于a的垂直坐标(以确保当前a:hover不会遮挡住其他链接);

  我们看看xhtml代码:
div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<ul class=\"star-rating\">
<li class=\"current-rating\">Currently 3.5/5 Stars.</li>
<li><a href=\"#\" title=\"1 star out of 5\" class=\"one-star\">1</a></li>
<li><a href=\"#\" title=\"2 stars out of 5\" class=\"two-stars\">2</a></li>
<li><a href=\"#\" title=\"3 stars out of 5\" class=\"three-stars\">3</a></li>
<li><a href=\"#\" title=\"4 stars out of 5\" class=\"four-stars\">4</a></li>
<li><a href=\"#\" title=\"5 stars out of 5\" class=\"five-stars\">5</a></li>
</ul>

  我们看CSS是如何定义的:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background: url(images/star_rating2.gif) top left repeat-x;
}
.star-rating li{
padding:0px;
margin:0px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:30px;
height: 30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
}
.star-rating li a:hover{
background: url(images/star_rating2.gif) left center;
z-index: 2;
left: 0px;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 90px;
}
.star-rating a.four-stars{
left: 90px;
}
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}
.star-rating li.current-rating{
background: url(images/star_rating2.gif) left bottom;
position: absolute;
height: 30px;
width:105px;
display: block;
text-indent: -9000px;
z-index: 1;
}

  我们看最后的运行效果:

div css xhtml xml Source Code to Run Source Code to Run [www.21shipin.com]

[ 可先修改部分代码 再运行查看效果 ]

  
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058