CSS打造超炫进度条、柱状图

题目有点标题党了，先来个图弥补一下。

怎么样，是不是有点心动了，完全CSS+Div打造。再看一下简单而又漂亮的

是不是也还可以呢？下面看下代码是怎样的

css：

 1                 .graph { 
 2                     position: relative; 
 3                     width: 200px; 
 4                     border: 1px solid #B1D632; 
 5                     padding: 2px; 
 6                     margin-bottom: .5em;                    
 7                 }
 8                 .graph .bar { 
 9                     display: block;    
10                     position: relative;
11                     background: #B1D632; 
12                     text-align: center; 
13                     color: #333; 
14                     height: 2em; 
15                     line-height: 2em;                                    
16                 }
17                 .graph .bar span { position: absolute; left: 1em; }

 

HTML：

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

 

只要改变bar的width就可以随意改变进度条的长度，简单易用吧。

再看上面复杂的代码又是怎么实现的

CSS：

 1                 /* 复杂进度条 */
 2                 dl { 
 3                     margin: 0; 
 4                     padding: 0;                     
 5                 }
 6                 dt { 
 7                     position: relative;
 8                     clear: both;
 9                     display: block; 
10                     float: left; 
11                     width: 104px; 
12                     height: 20px; 
13                     line-height: 20px;
14                     margin-right: 17px;              
15                     font-size: .75em; 
16                     text-align: right; 
17                 }
18                 dd { 
19                     position: relative; 
20                     display: block;                 
21                     float: left;     
22                     width: 197px; 
23                     height: 20px; 
24                     margin: 0 0 15px; 
25                     background: url("g_colorbar.jpg"); 
26                 }
27                 * html dd { float: none; } /*此处为 IE hack */
28                 
29                 dd div { 
30                     position: relative; 
31                     background: url("g_colorbar2.jpg"); 
32                     height: 20px; 
33                     width: 75%; 
34                     text-align:right; 
35                 }
36                 dd div strong { 
37                     position: absolute; 
38                     right: -5px; 
39                     top: -2px; 
40                     display: block; 
41                     background: url("g_marker.gif"); 
42                     height: 24px; 
43                     width: 9px; 
44                     text-align: left;
45                     text-indent: -9999px; 
46                     overflow: hidden;
47                 }
48 

 

HTML:

 1 <h3>复杂进度条</h3>
 2                     <dl>
 3                         <dt>喜欢博客园</dt>
 4                         <dd>
 5                             <div style="width:25%;"><strong>25%</strong></div>
 6                         </dd>
 7                         <dt>很喜欢</dt>
 8                         <dd>
 9                             <div style="width:55%;"><strong>55%</strong></div>
10                         </dd>
11                         <dt>超级喜欢</dt>
12                         <dd>
13                             <div style="width:75%;"><strong>75%</strong></div>
14                         </dd>
15                     </dl>
16 

 

CSS中用到了几个图片在示例代码下载中有。使用方法同样简单。

再看一下柱状图的效果：

我觉得这个是最炫的（偷笑一个^_^）其实最主要的地方在图片上，代码就不贴了，有兴趣的请下载示例代码。

 

本文参考：

http://applestooranges.com/goodies/css-for-bar-graphs/

http://varhi.com/?p=2886