CSS條狀圖表是我們在網頁設計中常常會遇到的一種形式。條狀圖表可以將數量,以條狀圖形的形式直觀的表示出來。
CSS基本長條圖的實作方法是什麼?我們看下面的實例介紹:
這是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%;",定義了所設定的區域既大小。這樣一個基本的長條圖就完成了!
我們看最終的運行效果: