首頁 > web前端 > css教學 > 用CSS實現基本條狀圖表效果_經驗交流

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

WBOY
發布: 2016-05-16 12:06:59
原創
1576 人瀏覽過

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%;",定義了所設定的區域既大小。這樣一個基本的長條圖就完成了! 
  我們看最終的運行效果:

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板