三种CSS图表代码

【 tulaoshi.com - Web开发 】

这是最基本的预览，下面是几种不同的应用代码

一、基本的CSS图表

CSS代码

style   
    .graph {    
        position: relative; /* IE is dumb */  
        width: 200px;    
        border: 1px solid #B1D632;    
        padding: 2px;    
    }   
    .graph .bar {    
        display: block;   
        position: relative;   
        background: #B1D632;    
        text-align: center;    
        color: #333;    
        height: 2em;    
        line-height: 2em;               
    }   
    .graph .bar span { position: absolute; left: 1em; }   
/style   
div class="graph"   
    strong class="bar" style="width: 24%;"24%/strong   
/div

二、复杂的CSS条形图

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: rightright;    
    }   
    dd {    
        position: relative; /* IE is dumb */  
        display: block;         
        float: left;        
        width: 197px;    
        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:rightright;    
     }   
     dd div strong {    
        position: absolute;    
        rightright: -5px;    
        top: -2px;    
        display: block;    
        background: url("g_marker.gif");    
        height: 24px;    
        width: 9px;    
        text-align: left;   
        text-indent: -9999px;    
        overflow: hidden;   
     }   
/style   
dl   
    dtLove Life/dt   
    dd   
        div style="width:25%;"strong25%/strong/div   
    /dd   
    dtEducation/dt   
    dd   
        div style="width:55%;"strong55%/strong/div   
    /dd   
    dtWar Craft 3 Rank/dt   
    dd   
        div style="width:75%;"strong75%/strong/div   
    /dd   
/dl  

三、CSS竖条图

CSS代码

style   
    #vertgraph {   
        width: 378px;    
        height: 207px;    
        position: relative;    
        background: url("g_backbar.gif") no-repeat;    
    }   
    #vertgraph ul {    
        width: 378px;    
        height: 207px;    
        margin: 0;    
        padding: 0;    
    }   
    #vertgraph ul li {     
        position: absolute;    
        width: 28px;    
        height: 160px;    
        bottombottom: 34px;    
        padding: 0 !important;    
        margin: 0 !important;    
        background: url("g_colorbar3.jpg") no-repeat !important;   
        text-align: center;    
        font-weight: bold;    
        color: white;    
        line-height: 2.5em;   
    }   
  
    #vertgraph li.critical { left: 24px; background-position: 0px  !important; }   
    #vertgraph li.high { left: 101px; background-position: -28px  !important; }   
    #vertgraph li.medium { left: 176px; background-position: -56px  !important; }   
    #vertgraph li.low { left: 251px; background-position: -84px  !important; }   
    #vertgraph li.info { left: 327px; background-position: -112px  !important; }   
/style   
div id="vertgraph"   
    ul   
        li class="critical" style="height: 150px;"22/li   
        li class="high" style="height: 80px;"7/li   
        li class="medium" style="height: 50px;"3/li   
        li class="low" style="height: 90px;"8/li   
        li class="info" style="height: 40px;"2/li   
    /ul   
/div