彩虹条

html代码：

 

<link type="text/css" rel="stylesheet" href="test.css" />
<div id="contentA" class="area">  
  <div class="gdContent">
    <div class="total_rate">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th width="65" class="column-1">综合得分</th><th class="column-2" id="rate1">83.9</th><th class="column-3"><input type="button" value="我来评分" class="btn" style="cursor:pointer;" /></th>
        </tr>			
      </table>
    </div>
    <div class="small_rate">
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th class="column-1"></th><th class="column-2"></th><th class="column-3">&nbsp;</th>
        </tr>
        <tr>
          <td class="title">外观：</td><td class="rate" id="rate2">14.2</td>
          <td class="num">
            <div class="num_item">
              <div class="imgs imgs1" id="ratePic2"></div>
            </div>
          </td>
        <tr><td colspan="3" class="j2"></td></tr>
        </tr>			
        <tr>
          <td class="title">内饰：</td><td class="rate" id="rate3">23.0</td>
          <td class="num">
            <div class="num_item">
              <div class="imgs imgs2" id="ratePic3"></div>
            </div>
          </td>
        <tr><td colspan="3" class="j2"></td></tr>
        </tr>			
        <tr>
          <td class="title">性能：</td><td class="rate" id="rate4">30.0</td>
          <td class="num">
            <div class="num_item">
              <div class="imgs imgs3" id="ratePic4"></div>
            </div>
          </td>
        <tr><td colspan="3" class="j2"></td></tr>
        </tr>				
        <tr>
          <td class="title">售后：</td><td class="rate" id="rate5">16.7</td>
          <td class="num">
            <div class="num_item">
              <div class="imgs imgs4" id="ratePic5"></div>
            </div>
          </td>
        <tr><td colspan="3" class="j2"></td></tr>
        </tr>
      </table>				
    </div>
  </div>
</div>
<script type="text/javascript">		
  function $(obj){
    return(document.getElementById(obj))
  }		
  function valueInit(){
    $("ratePic2").style.width=parseInt($("rate2").innerHTML / 3 * 26) + "px"
    $("ratePic3").style.width=parseInt($("rate3").innerHTML / 6 * 26) + "px"
    $("ratePic4").style.width=parseInt($("rate4").innerHTML / 7 * 26) + "px"
    $("ratePic5").style.width=parseInt($("rate5").innerHTML / 4 * 26) + "px"	
  }
  valueInit();	
</script>

 

css代码：

 

body{margin:0 auto;padding:0;background:#FFF;color:#666;font:12px '宋体';text-align:center;}
table,td{font-size:12px}
#contentA .total_rate table{width:255px;margin:0 auto;}
#contentA .total_rate .btn{background:url(btn.gif); width:82px;height:28px;border:0;color:#fff;font-weight: bold;}
#contentA .total_rate .column-2{	font-size:36px;color:#B50000;font-weight: bold;font-family:arial;}
.small_rate table{margin:0 auto;}
.small_rate th{height:5px;text-align:left;color:#333;line-height:5px;}
.small_rate .column-1{width:38px;}
.small_rate .column-2{width:30px;}
.small_rate .column-3{width:135px;}
.small_rate .title{color:#333;}
.small_rate .rate{color:#B50000;font-size:12px;font-family:arial;font-weight: bold;}
.small_rate .num .num_item{position:relative;height:16px;background:url(bg.gif) no-repeat 0 0;height:8px;font-size:1px;line-height:1px;}
.small_rate .num .imgs{position:absolute;top:0;left:0;background:url(bg.gif) no-repeat 0 0;height:8px;font-size:1px;line-height:1px;}
.small_rate .num .imgs1{background-position:0 -8px;}
.small_rate .num .imgs2{background-position:0 -16px;}
.small_rate .num .imgs3{background-position:0 -24px;}
.small_rate .num .imgs4{background-position:0 -32px;}
.small_rate .j2{height:5px;font-size:1px;}

 

效果图：