<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>CSS3柱形阶梯条形统计图代码 - 网页模板</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="bar-chart">
<div class="graph">
<ul class="x-axis">
<li><span>2010</span></li>
<li><span>2012</span></li>
<li><span>2013</span></li>
<li><span>2014</span></li>
<li><span>2015</span></li>
</ul>
<ul class="y-axis">
<li><span>20</span></li>
<li><span>15</span></li>
<li><span>10</span></li>
<li><span>5</span></li>
<li><span>0</span></li>
</ul>
<div class="bars">
<div class="bar-group">
<div class="bar bar-1 stat-1" style="height: 51%;">
<span>4080</span>
</div>
<div class="bar bar-2 stat-2" style="height: 71%;">
<span>5680</span>
</div>
<div class="bar bar-3 stat-3" style="height: 13%;">
<span>1040</span>
</div>
</div>
<div class="bar-group">
<div class="bar bar-4 stat-1" style="height: 76%;">
<span>6080</span>
</div>
<div class="bar bar-5 stat-2" style="height: 86%;">
<span>6880</span>
</div>
<div class="bar bar-6 stat-3" style="height: 22%;">
<span>1760</span>
</div>
</div>
<div class="bar-group">
<div class="bar bar-7 stat-1" style="height: 78%;">
<span>6240</span>
</div>
<div class="bar bar-8 stat-2" style="height: 72%;">
<span>5760</span>
</div>
<div class="bar bar-9 stat-3" style="height: 36%;">
<span>2880</span>
</div>
</div>
<div class="bar-group">
<div class="bar bar-10 stat-1" style="height: 44%;">
<span>3520</span>
</div>
<div class="bar bar-11 stat-2" style="height: 64%;">
<span>5120</span>
</div>
<div class="bar bar-12 stat-3" style="height: 59%">
<span>4720</span>
</div>
</div>
<div class="bar-group">
<div class="bar bar-13 stat-1" style="height: 28%;">
<span>2240</span>
</div>
<div class="bar bar-14 stat-2" style="height: 33%;">
<span>2640</span>
</div>
<div class="bar bar-15 stat-3" style="height: 94%;">
<span>7520</span>
</div>
</div>
</div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>