分类：建站杂谈 | 阅读：9723 | 评论：0 | 最新评论：2009-7-24 9:52:18 By
用CSS制作横向排列的条状图表演示代码，用来生成柱状图之类的数据统计表，的确是个不错的方法，而且代码浅显易懂，便于修改完善，基本雏形已经展示在大家面前，剩下的功能你可以继续扩展哦。
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="
http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS横向条状图表</title>
<style type="text/css">
.graph {
position: relative; /* www.codefans.net */
width: 200px;
border: 1px solid #B1D632;
padding: 2px;
}
.graph .bar {
display: block;
position: relative;
background: #B1D632;
text-align: center;
color: #333;
height: 2em;
line-height: 2em;
}
.graph .bar span { position: absolute; left: 1em; }
</style>
</head>
<body>
<div class="graph">
<strong class="bar" style="width: 33%;">33%</strong>
</div>
<br />
<div class="graph">
<strong class="bar" style="width: 78%;">78%</strong>
</div>
</body>
</html>
24小时新发主题 
最近被编辑的主题 
超过24小时普通主题