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

一、基本的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>    
    <dt>Love Life</dt>    
    <dd>    
        <div style="width:25%;"><strong>25%</strong></div>    
    </dd>    
    <dt>Education</dt>    
    <dd>    
        <div style="width:55%;"><strong>55%</strong></div>    
    </dd>    
    <dt>War Craft 3 Rank</dt>    
    <dd>    
        <div style="width:75%;"><strong>75%</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>