CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

本文使用css实现进度条与柱状图的制作，效果很酷，不信可以先来看看效果图：

以上的进度条，是基于div+css实现。

下面讲解制作方法：

CSS代码：

.graph {   
    position: relative;   
    width: 200px;   
    border: 1px solid #B1D632;   
    padding: 2px;   
    margin-bottom: .5em;                      
}  
.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; } 

HTML代码：

<h3>简单进度条</h3> 
<div class="graph"> 
<strong class="bar" style="width: 54%;"><span>54%</span></strong> 
</div>      
<div class="graph"> 
<strong class="bar" style="width: 8%;"><span>8%</span></strong></div> 

 只要改变bar的width就可以随意改变进度条的长度.

下面是复杂那个效果的制作方法：

CSS代码：

/* 复杂进度条 */ 
 dl {   
     margin: 0;   
     padding: 0;                       
 }  
 dt {   
     position: relative;  
     clear: both;  
     display: block;   
     float: left;   
     width: 104px;   
     height: 20px;   
     line-height: 20px;  
     margin-right: 17px;                
     font-size: .75em;   
     text-align: right;   
 }  
 dd {   
     position: relative;   
     display: block;                   
     float: left;       
     width: 197px;   
     height: 20px;   
     margin: 0 0 15px;   
     background: url("g_colorbar.jpg");   
 }  
 * html dd { float: none; } /*此处为 IE hack */ 
   
 dd div {   
     position: relative;   
     background: url("g_colorbar2.jpg");   
     height: 20px;   
     width: 75%;   
     text-align:right;   
 }  
 dd div strong {   
     position: absolute;   
     right: -5px;   
     top: -2px;   
     display: block;   
     background: url("g_marker.gif");   
     height: 24px;   
     width: 9px;   
     text-align: left;  
     text-indent: -9999px;   
     overflow: hidden;  
 } 

HTML 代码：

<h3>复杂进度条</h3> 
<dl> 
    <dt>喜欢博客园</dt> 
    <dd> 
        <div style="width:25%;"><strong>25%</strong></div> 
    </dd> 
    <dt>很喜欢</dt> 
    <dd> 
        <div style="width:55%;"><strong>55%</strong></div> 
    </dd> 
    <dt>超级喜欢</dt> 
    <dd> 
        <div style="width:75%;"><strong>75%</strong></div> 
    </dd> 
</dl> 

CSS中用到了几个图片在示例代码下载下载中有.

下面是柱状图的制作。

柱状图的效果图：