CSS中的进度条、柱状图

来源：广州中睿信息技术有限公司官网

发布时间：2012/10/21 23:25:16 编辑：editor 阅读 521 次

题目有点标题党了，先来个图弥补一下。怎么样，是不是有点心动了，完全CSS+Div打造。再看一下简单而又漂亮的是不是也还可以呢？下面看下代码是怎样的css：代码Codehighlightingprod

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

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

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

css：

代码

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> 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：

代码

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

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

CSS：

代码

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> 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:

代码

愿景：成为最专业的软件研发服务领航者
中睿信息技术有限公司广州•深圳	Tel：020-38931912	务实 Pragmatic
广州：广州市天河区翰景路1号金星大厦18层中睿信息	Fax：020-38931912	专业 Professional
深圳：深圳市福田区车公庙有色金属大厦509~510	Tel：0755-25855012	诚信 Integrity
所有权声明：PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。