site topic网站专题
首页
>
网站专题
>
专题详情
分享新闻到:

纯CSS星级评价

互诺科技:2010-01-14 10:06     阅读数:       标签:

做一个星级评价的功能不是很难,但是要单纯用CSS写估计就有点难度了,先来个截图:

效果很简单,可能现在您现在脑子里已经有实现的思路了。下面先看一下我们通常情况下的实现方法:

CSS:

以下为引用的内容:

          .jsstar
        
{   list-style: none;
            margin
: 0px;
            padding
: 0px;
            width
: 100px;
            height
: 20px;
            position
: relative;
            
            
}
         .jsstar li  
         
{
            padding
:0px;
            margin
: 0px; 
            float
: left; 
            width
:20px;
            height
:20px;
            background
:url(star_rating.gif) 0 0 no-repeat;
            
}  

HTML:

以下为引用的内容:

<p>Javascript + CSS实现</p>
<ul class="jsstar">
    
<li title="一星"></li>
    
<li title="二星"></li>
    
<li title="三星"></li>
    
<li title="四星"></li>
    
<li title="五星"></li>
</ul>

JS:(我用的是jquery)