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; }
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：
代码
只要改变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
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:
代码
CSS中用到了几个图片在示例代码下载中有。使用方法同样简单。
再看一下柱状图的效果：
我觉得这个是最炫的（偷笑一个^_^）其实最主要的地方在图片上，代码就不贴了，有兴趣的请下载示例代码。
本文参考：
