星级评价

闲来无事,想做一个星级评价系统的UI,又不想用JavaScript。分析一下,只能从:hover这个伪类入手,但是IE6除了a标签,别的标签都不支持:hover伪类。所以问题就限定在怎么样用a标签来实现星级评价。

假设星级评价有5个等级,每个星星有20象素的高度和宽度。

最初的想法是用嵌套的方式去实现,但a标签是不能嵌套使用的。所以又想到了重叠的方式,比如等级5是100象素的宽度,等级4是80个象素,并且覆盖到等级5的上面。等级3是60个象素,覆盖到等级4的上面。以此类推,并且把这5个a标签左对齐,设置一下hover时的背景图片就搞定了。

CSS代码:

#rating {
  position: relative;
}
#rating a {
  display: block;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
}
#rating a:hover {
  background: red;
}
#rank5 {
  width: 100px;
}
/* 每个rank都要设置宽度,很麻烦。省略不写了。 */

HTML代码:

<div id="rating">
  <a id="rank5" href="#"></a>
  <a id="rank4" href="#"></a>
  <a id="rank3" href="#"></a>
  <a id="rank2" href="#"></a>
  <a id="rank1" href="#"></a>
</div>

但是这样很麻烦,每个等级的a标签都要设置宽度。那么就结合一下嵌套和重叠的方法,每个等级再加入div标签做嵌套,实现自动适应宽度。

CSS代码:

#rating {
  width: 100px;
  height: 20px;
  background: transparent url(star_rating.gif) repeat;
}
#rating div {
  margin-right: 20px;       
}
#rating, #rating div
{
  zoom: 1; /* 如果不加这个,在IE6,7下你会很纠结 */       
  position: relative; 
}
#rating a {
  position: absolute;
  height: 20px;
  width: 100%;
}
#rating a:hover {
  background: transparent url(star_rating.gif) repeat;
  background-position: 0 -20px;
}     

HTML代码:

<div id="rating"> 
  <a href="#"></a>
  <div> 
    <a href="#"></a>
    <div> 
      <a href="#"></a>
      <div> 
        <a href="#"></a>
        <div> 
          <a href="#"></a>
        </div>
      </div>
    </div>
  </div>
</div>

解释一下,#rating这个div是等级5的容器,设定它的宽度为100象素,这时候它里面的div也都是宽100象素。然后它里面的div分别向右间隔20个象素,这样就变成了宽100px,80px,60px,40px和20px的五个div。再让a标签绝对定位重叠起来,并且让它们和容器一样的大小。设置好背景图片之后,一个星级评价的UI就完成了。

点我查看完整的演示

星级评价》上有1条评论

  1. liner-z

    zoom: 1; /* 如果不加这个,在IE6,7下你会很纠结 */
    加height也可以,貌似只有IE6才有问题。7没事。
    IE6那个没办法用科学来解释了,地球人已经无法阻止IE的无厘头花样了。

发表评论