CSS：
程式碼
<風格>
#圖框{
邊框：1px實心#e7e7e7；
內邊距：10px；
寬度：250px；
背景顏色:#f8f8f8;
邊距：5px 0；
}
#graphbox h2{
顏色：#666666；
字體系列：Arial；
字體大小：18px；
字體粗細：700；
}
。
職位：親屬；
背景顏色：#F0EFEF；
邊框：1px實線#cccccc；
內邊距：2px；
字體大小：13px；
字體粗細：700；
}
.graph .橘色、.綠色、.藍色、.紅色、.黑色{
職位：親屬；
文字對齊：左對齊；
顏色：#ffffff；
高度：18px；
行高：18px；
字體系列：Arial；
顯示：塊；
}
.graph .orange{背景顏色:#ff6600;}
.graph .green{背景顏色:#66CC33;}
.graph .blue{背景顏色:#3399CC;}
.graph .red{背景顏色：紅色;}
.graph .black{背景顏色:#555;}
</風格>
HTML：
程式碼
<div id="graphbox">
<h2>長條圖範例</h2>
<div class="graph"><span class="orange" style="width:35%;">橘色：35%</span></div>
<div class="graph"><span class="green" style="width:90%;">綠色：90%</span></div>
<div class="graph"><span class="blue" style="width:75%;">藍色：75%</span></div>
<div class="graph"><span class="red" style="width:85%;">紅：85%</span></div>
<div class="graph"><span class="black" style="width:100%;">黑色：100%</span></div>
</div>