CSS打造超炫進度條、柱狀圖

作者: 古道來源: 博客園發布時間: 2010-01-11 15:33 閱讀: 2085 次推薦: 0 原文鏈接 [收藏]

題目有點標題黨了，先來個圖彌補一下。

怎么樣，是不是有點心動了，完全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中用到了幾個圖片在示例代碼下載中有。使用方法同樣簡單。

再看一下柱狀圖的效果：