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：

代码

1                     <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://www.45its.com)告诉大家要动态的进度条就动态改变 tyle="width:25%;"。就改变with的值就好了。

最新热点		最新推荐		相关文章
				CSS伪类选择器nth-child() css3教程:background属性调整增强 css教程：CSS3 Media Queries 详解 CSS 类名的长命名和短命名 CSS实例教程:非浮动区域设置宽度如何使用css约束一个层不可见？ CSS的list-style解释小议使用“完整”的CSS的缺点 CSS中的相对定位与绝对定位详解实例使用DIV+CSS制作圆角边框加阴影…