CSS：
程序代碼
<樣式>
#graphbox {
邊界：1PX實心＃E7E7E7;
填充：10px;
寬度：250px;
背景色：＃f8f8f8;
保證金：5px 0;
}
#GraphBox H2 {
顏色：＃666666;
字體家庭：Arial；
字體大小：18px;
字體重量：700;
}
。圖形{
位置：相對；
背景色：＃f0efef;
邊界：1PX實心#CCCCCC;
填充：2px;
字體大小：13px;
字體重量：700;
}
。
位置：相對；
文本平衡：左；
顏色：#ffffff;
身高：18px;
線高：18px;
字體家庭：Arial；
顯示：塊;
}
.graph .Orange {background-color：＃ff6600;}
.graph .green {background-color：＃66cc33;}
.graph .blue {background-color：＃3399cc;}
。
。
</style>
html：
程序代碼
<div ID =“ GraphBox”>
<h2> bargraphs示例</h2>
<div class =“ graph”> <span class =“橙色” style =“寬度：35％;”>橙色：35％</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％;”> black：100％</span> </div>
</div>