用CSS實(shí)現(xiàn)基本條狀圖表效果
更新時(shí)間：2007年11月15日 21:40:29 作者：
CSS條狀圖表是我們?cè)诰W(wǎng)頁設(shè)計(jì)中常常會(huì)遇到的一種形式。條狀圖表可以將數(shù)量，以條狀圖形的形式直觀的表示出來。
CSS基本條狀圖表的實(shí)現(xiàn)方法是什么？我們看下面的實(shí)例介紹：
<div class="graph">
<strong class="bar" style="width: 24%;">24%</strong>
</div>
這是xhtml代碼，定義了一個(gè)容器，應(yīng)用類graph，其中包括了一個(gè)xhtml元素strong，并且對(duì)這個(gè)元素應(yīng)用類bar。
我們看下面的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; }
通過上面的邊框，顏色的定義，我們勾勒出了一個(gè)條狀的圖形，我們?cè)趚html代碼中style="width: 24%;"，定義了所設(shè)置的區(qū)域既大小。這樣一個(gè)基本的條狀圖表就完成了！
我們看最終的運(yùn)行效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
CSS基本條狀圖表的實(shí)現(xiàn)方法是什么？我們看下面的實(shí)例介紹：
復(fù)制代碼 代碼如下:
<div class="graph">
<strong class="bar" style="width: 24%;">24%</strong>
</div>
這是xhtml代碼，定義了一個(gè)容器，應(yīng)用類graph，其中包括了一個(gè)xhtml元素strong，并且對(duì)這個(gè)元素應(yīng)用類bar。
我們看下面的CSS定義：
復(fù)制代碼 代碼如下:
.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; }
通過上面的邊框，顏色的定義，我們勾勒出了一個(gè)條狀的圖形，我們?cè)趚html代碼中style="width: 24%;"，定義了所設(shè)置的區(qū)域既大小。這樣一個(gè)基本的條狀圖表就完成了！
我們看最終的運(yùn)行效果：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
Marquee鮮為人知的用法 不往這方面想還真的不知道。 靈活運(yùn)用的話還真是個(gè)好東西呢2008-06-06
relative absolute無法沖破的等級(jí)問題解決
如果我我們?cè)O(shè)定LI為position:relative;設(shè)置span為position:absolute;那么我們會(huì)發(fā)現(xiàn)無論SPAN的z-index值設(shè)置得再高都將永遠(yuǎn)在后面父級(jí)的下面。2008-06-06
2008-01-01
css 跨瀏覽器實(shí)現(xiàn)float:center
我們都知道float:left和float:right，但是否想過float:center呢？居中浮動(dòng)。。。2008-08-08
巧妙的最大化動(dòng)態(tài)載入IFrame的方法
巧妙的最大化動(dòng)態(tài)載入IFrame的方法...2007-03-03
Web標(biāo)準(zhǔn)學(xué)習(xí)資源（書籍、網(wǎng)站）推薦
Web標(biāo)準(zhǔn)學(xué)習(xí)資源（書籍、網(wǎng)站）推薦...2007-02-02
分頁顯示之超級(jí)提速版...2006-12-12
發(fā)現(xiàn)四種在網(wǎng)頁中使用CSS樣式表的方法
發(fā)現(xiàn)四種在網(wǎng)頁中使用CSS樣式表的方法...2007-09-09
指定網(wǎng)頁的doctype解決CSS Hacking方法總結(jié)
我們都知道，要做WD（web designer）,首先得伺侯好幾個(gè)瀏覽器:IE6,IE7,Firefox.一般的頁面，都只要求在IE6,IE7,Firefox下正常工作就行了。2008-09-09
一般div+css分頁效果的實(shí)現(xiàn)代碼2008-12-12