CSS条状图表：垂直型

<style>
    #vertgraph {}{                    
        width: 378px; 
        height: 207px; 
        position: relative; 
        background: url("http://www.ximicc.com/attachments/month_0803/52008310134528.gif") no-repeat; 
    }
    #vertgraph ul {}{ 
        width: 378px; 
        height: 207px; 
        margin: 0; 
        padding: 0; 
    }
    #vertgraph ul li {}{  
        position: absolute; 
        width: 28px; 
        height: 160px; 
        bottom: 34px; 
        padding: 0 !important; 
        margin: 0 !important; 
        background: url("http://www.ximicc.com/attachments/month_0803/u200831013462.jpg") no-repeat !important;
        text-align: center; 
        font-weight: bold; 
        color: white; 
        line-height: 2.5em;
    }

    #vertgraph li.high {}{ left: 24px; background-position: 0px bottom !important; }
    #vertgraph li.low {}{ left: 101px; background-position: -28px bottom !important; }
    #vertgraph li.lower {}{ left: 176px; background-position: -56px bottom !important; }
    #vertgraph li.medium {}{ left: 251px; background-position: -84px bottom !important; }
    #vertgraph li.info {}{ left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
    <ul>
        <li class="high" style="height: 160px;">16</li>
        <li class="low" style="height: 70px;">7</li>
        <li class="lower" style="height: 30px;">3</li>
        <li class="medium" style="height: 80px;">8</li>
        <li class="info" style="height: 20px;">2</li>
    </ul>
</div>

原文来自：http://www.ximicc.com/article.asp?id=77