CSS条状图表:复合型

< style >
    dl  {  
        margin :  0 ;  
        padding :  0 ;                      
     }
    dt  {  
        position :  relative ;   /*  IE is dumb  */
        clear :  both ;
        display :  block ;  
        float :  left ;  
        width :  104px ;  
        height :  20px ;  
        line-height :  20px ;
        margin-right :  17px ;               
        font-size :  .75em ;  
        text-align :  right ;  
     }
    dd  {  
        position :  relative ;   /*  IE is dumb  */
        display :  block ;                  
        float :  left ;      
        width :  197px ;  
        height :  20px ;  
        margin :  0 0 15px ;  
        background :  url("http://images.cnblogs.com/cnblogs_com/youth0826/143133/r_03.jpg") ;  
      }
     * html dd  {  float :  none ;   }  
     /*  IE is dumb; Quick IE hack, apply favorite filter methods for 
    wider browser compatibility  */

     dd div  {  
        position :  relative ;  
        background :  url("http://images.cnblogs.com/cnblogs_com/youth0826/143133/r_04.jpg") ;  
        height :  20px ;  
        text-align : right ;  
      }
     dd div strong  {  
        position :  absolute ;  
        right :  -5px ;  
        top :  -2px ;  
        display :  block ;  
        background :  url("http://images.cnblogs.com/cnblogs_com/youth0826/143133/r_05.gif") ;  
        height :  24px ;  
        width :  9px ;  
        text-align :  left ;
        text-indent :  -9999px ;  
        overflow :  hidden ;
      }
</ style >
< dl >
     < dt > Spring </ dt >
     < dd >
         < div  style ="width:5%;" >< strong > 5% </ strong ></ div >
     </ dd >
     < dt > Ximicc </ dt >
     < dd >
         < div  style ="width:55%;" >< strong > 55% </ strong ></ div >
     </ dd >
     < dt > Technique </ dt >
     < dd >
         < div  style ="width:75%;" >< strong > 75% </ strong ></ div >
     </ dd >
</ dl >
引用自：http://www.blueidea.com/tech/web/2008/5924_2.asp