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://www.cnblogs.com/images/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://www.cnblogs.com/images/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://www.cnblogs.com/images/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="5%;"><strong>5%</strong></div>
    </dd>
    <dt>Ximicc</dt>
    <dd>
        <div style="55%;"><strong>55%</strong></div>
    </dd>
    <dt>Technique</dt>
    <dd>
        <div style="75%;"><strong>75%</strong></div>
    </dd>
</dl>
引用自：http://www.blueidea.com/tech/web/2008/5924_2.asp