用背景图片实现CSS柱状图表一例

　　我们前面的文章中介绍了，CSS基本条状图表的实现方法：http://www./article.asp?id=362。我们现在介绍，用背景图片的方法实现柱状图表。看下面的效果图：


　　实现这样的图表并没有什么难处，我们看下面的xhtml代码：

Example Source Code [www.]<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>
　　这是一个无序列表，我们注意到，我们在xhtml中使用行内样式定义了不同的li的高度。
　　我们在这一图表的制作中，需要使用两张图片，分别如下：




　　我们看下面的css代码：

Example Source Code [www.]    #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; 
        bottom: 34px; 
        padding: 0 !important; 

   用户名: (新注册)  密码: 匿名评论 [所有评论]     注意:（评论内容不能超过250字,需审核后才会公布,可以匿名评论,请自觉遵守互联网相关政策法规。）