用css实现的BAR图表

sunlei

你相信以下的BAR图表是用CSS实现的吗?
1. [attachment=10764]

1. <style>
2.   .graph {
3.       position: relative; /* IE is dumb */
4.       width: 200px;
5.       border: 1px solid #B1D632;
6.       padding: 2px;
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; }</style> <div class="graph"> <strong class="bar" style="width: 24%;">24%</strong>
18. </div>

复制代码

2. [attachment=10765]

1. <style>
3.   dl {
4.       margin: 0;
5.       padding: 0;                    
6.   }
7.   dt {
8.       position: relative; /* IE is dumb */
9.       clear: both;
10.       display: block;
11.       float: left;
12.       width: 104px;
13.       height: 20px;
14.       line-height: 20px;
15.       margin-right: 17px;              
16.       font-size: .75em;
17.       text-align: right;
18.   }
19.   dd {
20.       position: relative; /* IE is dumb */
21.       display: block;                 
22.       float: left;     
23.       width: 197px;
24.       height: 20px;
25.       margin: 0 0 15px;
26.       background: url("g_colorbar.jpg");
27.    }
28.    * html dd { float: none; }
29.   /* IE is dumb; Quick IE hack, apply favorite filter methods for
30.   wider browser compatibility */
33.    dd div {
34.       position: relative;
35.       background: url("g_colorbar2.jpg");
36.       height: 20px;
37.       width: 75%;
38.       text-align:right;
39.    }
40.    dd div strong {
41.       position: absolute;
42.       right: -5px;
43.       top: -2px;
44.       display: block;
45.       background: url("g_marker.gif");
46.       height: 24px;
47.       width: 9px;
48.       text-align: left;
49.       text-indent: -9999px;
50.       overflow: hidden;
51.    }
53. </style>
54. <dl>
56.   <dt>Love Life</dt>
57.   <dd>
58.       <div style="width:25%;"><strong>25%</strong></div>
59.   </dd>
60.   <dt>Education</dt>
61.   <dd>
62.       <div style="width:55%;"><strong>55%</strong></div>
63.   </dd>
64.   <dt>War Craft 3 Rank</dt>
65.   <dd>
66.       <div style="width:75%;"><strong>75%</strong></div>
67.   </dd>
69. </dl>

复制代码

3. [attachment=10766]

1. <style>
2.   #vertgraph {                    
3.       width: 378px;
4.       height: 207px;
5.       position: relative;
6.       background: url("g_backbar.gif") no-repeat;
7.   }
8.   #vertgraph ul {
9.       width: 378px;
10.       height: 207px;
11.       margin: 0;
12.       padding: 0;
13.   }
14.   #vertgraph ul li {  
15.       position: absolute;
16.       width: 28px;
17.       height: 160px;
18.       bottom: 34px;
19.       padding: 0 !important;
20.       margin: 0 !important;
21.       background: url("g_colorbar3.jpg") no-repeat !important;
22.       text-align: center;
23.       font-weight: bold;
24.       color: white;
25.       line-height: 2.5em;
26.   }
28.   #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
29.   #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
30.   #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
31.   #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
32.   #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
34. </style>
35. <div id="vertgraph">
37.   <ul>
38.       <li class="critical" style="height: 150px;">22</li>
39.       <li class="high" style="height: 80px;">7</li>
40.       <li class="medium" style="height: 50px;">3</li>
41.       <li class="low" style="height: 90px;">8</li>
42.       <li class="info" style="height: 40px;">2</li>
43.   </ul>
44. </div>

复制代码

chinasaint

第一个可以显示，后2个显示不了啊

sunlei

你相信以下的BAR图表是用CSS实现的吗?
1. [attachment=10764]

1. <style>
2.   .graph {
3.       position: relative; /* IE is dumb */
4.       width: 200px;
5.       border: 1px solid #B1D632;
6.       padding: 2px;
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; }</style> <div class="graph"> <strong class="bar" style="width: 24%;">24%</strong>
18. </div>

复制代码

2. [attachment=10765]

1. <style>
3.   dl {
4.       margin: 0;
5.       padding: 0;                    
6.   }
7.   dt {
8.       position: relative; /* IE is dumb */
9.       clear: both;
10.       display: block;
11.       float: left;
12.       width: 104px;
13.       height: 20px;
14.       line-height: 20px;
15.       margin-right: 17px;              
16.       font-size: .75em;
17.       text-align: right;
18.   }
19.   dd {
20.       position: relative; /* IE is dumb */
21.       display: block;                 
22.       float: left;     
23.       width: 197px;
24.       height: 20px;
25.       margin: 0 0 15px;
26.       background: url("g_colorbar.jpg");
27.    }
28.    * html dd { float: none; }
29.   /* IE is dumb; Quick IE hack, apply favorite filter methods for
30.   wider browser compatibility */
33.    dd div {
34.       position: relative;
35.       background: url("g_colorbar2.jpg");
36.       height: 20px;
37.       width: 75%;
38.       text-align:right;
39.    }
40.    dd div strong {
41.       position: absolute;
42.       right: -5px;
43.       top: -2px;
44.       display: block;
45.       background: url("g_marker.gif");
46.       height: 24px;
47.       width: 9px;
48.       text-align: left;
49.       text-indent: -9999px;
50.       overflow: hidden;
51.    }
53. </style>
54. <dl>
56.   <dt>Love Life</dt>
57.   <dd>
58.       <div style="width:25%;"><strong>25%</strong></div>
59.   </dd>
60.   <dt>Education</dt>
61.   <dd>
62.       <div style="width:55%;"><strong>55%</strong></div>
63.   </dd>
64.   <dt>War Craft 3 Rank</dt>
65.   <dd>
66.       <div style="width:75%;"><strong>75%</strong></div>
67.   </dd>
69. </dl>

复制代码

3. [attachment=10766]

1. <style>
2.   #vertgraph {                    
3.       width: 378px;
4.       height: 207px;
5.       position: relative;
6.       background: url("g_backbar.gif") no-repeat;
7.   }
8.   #vertgraph ul {
9.       width: 378px;
10.       height: 207px;
11.       margin: 0;
12.       padding: 0;
13.   }
14.   #vertgraph ul li {  
15.       position: absolute;
16.       width: 28px;
17.       height: 160px;
18.       bottom: 34px;
19.       padding: 0 !important;
20.       margin: 0 !important;
21.       background: url("g_colorbar3.jpg") no-repeat !important;
22.       text-align: center;
23.       font-weight: bold;
24.       color: white;
25.       line-height: 2.5em;
26.   }
28.   #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
29.   #vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
30.   #vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
31.   #vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
32.   #vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
34. </style>
35. <div id="vertgraph">
37.   <ul>
38.       <li class="critical" style="height: 150px;">22</li>
39.       <li class="high" style="height: 80px;">7</li>
40.       <li class="medium" style="height: 50px;">3</li>
41.       <li class="low" style="height: 90px;">8</li>
42.       <li class="info" style="height: 40px;">2</li>
43.   </ul>
44. </div>

复制代码