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

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

代码

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