|
英文原文：CSS FOR BAR GRAPHS
翻譯整理：西米CC-www.ximicc.com
譯文已作精簡，保留了與主題切實相關(guān)的部分，并對文中整段給出的代碼進(jìn)行分解注釋，便于大家的閱讀和理解。要查看英語原文請參看原文地址，關(guān)于本例的效果，原文作者已測試瀏覽器如下：Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1).
首先是最基本的條狀圖表，思路很簡單，利用CSS中“百分比”寬度的彈性準(zhǔn)確地描繪出一個百分比柱形圖。
1.首先在頁面中建立一個DIV容器并添加名稱為graph樣式，其間添加一組strong標(biāo)簽作為文本對象的容器，注意其中除了調(diào)用名為bar的樣式之外，還直接利用行內(nèi)樣式設(shè)置了strong的寬度為84%：
<div class="graph">
<strong class="bar" style="width: 84%;">ximicc.com 84%</strong>
</div>
2.在.graph中，我們要定義最終效果中的外圍邊框樣式，border屬性的3個參數(shù)分別定義了邊框的粗細(xì)、線性以及顏色，在實際應(yīng)用中要根據(jù)具體的頁面風(fēng)格進(jìn)行修改。整個容器的寬度設(shè)置為200px，并利用padding設(shè)置DIV的內(nèi)邊距，目的是為了讓邊框與之后的文字背景色產(chǎn)生間距：
.graph {
position: relative; /* IE is dumb */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
加入樣式后的瀏覽效果如下：
3.樣式.bar中，首先將strong標(biāo)簽內(nèi)容轉(zhuǎn)換為塊級元素，配合背景顏色的設(shè)置進(jìn)行作用。樣式中除了設(shè)定文字的顏色、對齊方式及行高之外，最重要的是background屬性，效果中的柱狀條事實上就是這里設(shè)置的背景色，結(jié)合block顯示方式最終得到良好的體現(xiàn)。
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
我們可以運(yùn)行下面的代碼來查看最終的效果：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
本文鏈接：http://m.95time.cn/tech/web/2008/5923.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
