用CSS做条形图

Publish: 2009-10-30 14:40:29 Category: 一阳指

　　在网上找了个Css做的条形图，可惜原代码中的图片丢失了，也不知原来是什么样的。我试着自己补上图片，并修改了一些CSS参数，想不到真是自己想要的方式。这段代码和图片只有在6%-96之间显示得完美，在其它范围就有些变形了，但对于我来说已经够了。

原代码记录下：

<style> 
    dl {   
        margin: 10px 0px 10px 0px;   
        padding:  10px 0px -5px 0px;  
        background-color:#484848;  
        width: 330px;  
    }  
    dt {   
        position: relative; /* IE is dumb */  
        clear: both;  
        display: block;   
        float: left;   
        width: 60px;   
        height: 20px;   
        line-height: 20px;  
        margin-right: 17px;                
        font-size: .75em;   
        text-align: right;   
        color: #fff;   
    }  
    dd {   
        position: relative; /* IE is dumb */  
        display: block;        
        float: left;       
        width: 240px;   
        height: 20px;   
        margin: 0 0 15px;   
        background: url("g_colorbar.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("g_colorbar2.jpg");   
        height: 20px;   
        width: 75%;   
        text-align:right;   
     }  
     dd div strong {   
        position: absolute;   
        right: 0px;   
        top: 0px;   
        display: block;   
        background: url("g_marker.gif");   
        height: 20px;   
        width: 7px;   
        text-align: left;  
        text-indent: -9999px;   
        overflow: hidden;  
     }  
</style> 
<dl> 
    <dt>Cinner</dt> 
    <dd> 
        <div style="width:25%;"><strong>25%</strong></div> 
    </dd> 
    <dt>Tonyer</dt> 
    <dd> 
        <div style="width:55%;"><strong>55%</strong></div> 
    </dd> 
    <dt>Bill Gates</dt> 
    <dd> 
        <div style="width:96%;"><strong>75%</strong></div> 
    </dd> 
</dl>