用CSS實現基本條狀圖表效果_經驗交流

CSS條狀圖表是我們在網頁設計中常常會遇到的一種形式。條狀圖表可以將數量，以條狀圖形的形式直觀的表示出來。 
　　CSS基本長條圖的實作方法是什麼？我們看下面的實例介紹：  

複製程式碼 程式碼如下:

  
24%  

 

       這是xhtml程式碼，定義了一個容器，應用類別graph，其中包含了一個xhtml元素strong，並且對這個元素應用類別bar。
　　我們看下面的CSS定義： 

複製程式碼 程式碼如下:

. graph {  
    position: relative; /* IE is dumb */ 
    width: 200px;  
Cisco ding: 2px;  
} 
.graph . bar {  
    display: block; 
    position: relative; 
    background: #B1D632 
    height: 2em;  
    line-height: 2em;            
} 
.graph .bar span { position: absolute; left:div 
        透過上面的邊框，顏色的定義，我們勾勒出了一個條狀的圖形，我們在xhtml代碼中style="width: 24%;"，定義了所設定的區域既大小。這樣一個基本的長條圖就完成了！ 
　　我們看最終的運行效果：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> .graph { position: relative; /* IE is dumb */ width: 200px; border: 1px solid #B1D632; padding: 2px; } .graph .bar { display: block; position: relative; background: #B1D632; text-align: center; color: #333; height: 2em; line-height: 2em; } .graph .bar span { position: absolute; left: 1em; } </style> <div class="graph"> <strong class="bar" style="width: 24%;">24%</strong> </div> <div class="graph"> <strong class="bar" style="width: 60%;">60%</strong> </div>