柱状图

• 50%

CSS Code

1	/* UI Object */

2	.ratio{padding-top:20px}

3	.ratio li{float:left;position:relative;width:100px;height:300px;margin-right:10px;list-style:none}

4	.ratio div{position:absolute;left:0;bottom:0;width:100%;background:url(img/bg_gage2.gif) repeat;font-size:0}

5	.ratio em{position:absolute;top:-20px;width:100%;font-size:12px;font-weight:bold;text-align:center}

6	/* //UI Object */

HTML Code

1	<!-- UI Object -->

2	<ul class="ratio">

3	<li><div style="height:30%"><em>30%</em></div></li>

4	<li><div style="height:40%"><em>40%</em></div></li>

5	<li><div style="height:100%"><em>50%</em></div></li>

6

</ul>

7	<!-- //UI Object -->