HTML & CSS 实现进度条效果

来自前程无忧

<style type="text/css">
.barp {
    background: url('http://img01.51jobcdn.com/im/2009/cv/bar_green_bg.gif') repeat-x scroll 0 0 transparent;
    border: 1px solid #AEB8D8;
    float: left;
    height: 10px;
    line-height: 10px;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 500px;
}
.baro {
    background: url('http://img01.51jobcdn.com/im/2009/cv/bar_green.gif') repeat scroll right 50% transparent;
    height: 10px;
    margin: 0;
    padding: 0;
}
</style>
 <div class="barp">
   <table cellspacing="0" cellpadding="0" border="0" style="width:83%" class="baro">
    <tbody>
     <tr>
      <td></td>
     </tr>
    </tbody>
   </table>
  </div>