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>