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