<!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=utf-8" />
<title>纯css样式制作的柱状图特效</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="histogram-container" id="histogram-container">
<!--背景方格-->
<div class="histogram-bg-line">
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div><img src="img/zhu1.jpg" width="15" height="15" />  完全符合</div></li>
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div><img src="img/zhu2.jpg" width="15" height="15" />  基本符合 </div></li>
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div><img src="img/zhu3.jpg" width="15" height="15" />  不符合</div></li>
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<ul>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
</div>
<!--柱状条-->
<div class="histogram-content">
<ul>
<li>
<span class="histogram-box"><a style="height:65%;" title="20%" class="aOne"></a></span>
<span class="name">物流中心</span>
<span class="histogram-box"><a style="height:13%" class="aOne1"title="20%"></a></span>
<span class="name"></span>
<span class="histogram-box"><a style="height:6%"class="aOne2" title="20%"></a></span>
<span class="name"></span>
</li>
<li>
<span class="histogram-box"><a style="height:80%;" title="20%" class="aOne"></a></span>
<span class="name">营销中心</span>
<span class="histogram-box"><a style="height:16%" class="aOne1"title="20%"></a></span>
<span class="name"></span>
<span class="histogram-box"><a style="height:13%"class="aOne2" title="20%"></a></span>
<span class="name"></span>
</li>
<li>
<span class="histogram-box"><a style="height:95%;" title="20%" class="aOne"></a></span>
<span class="name">业务中心</span>
<span class="histogram-box"><a style="height:13%" class="aOne1"title="20%"></a></span>
<span class="name"></span>
<span class="histogram-box"><a style="height:6%"class="aOne2" title="20%"></a></span>
<span class="name"></span>
</li>
<li>
<span class="histogram-box"><a style="height:65%;" title="20%" class="aOne"></a></span>
<span class="name">其他中心</span>
<span class="histogram-box"><a title="20%"></a></span>
<span class="name"></span>
<span class="histogram-box"><a style="height:6%"class="aOne2" title="20%"></a></span>
<span class="name"></span>
</li>
</ul>
</div>
<!--百分比 y轴-->
<div class="histogram-y">
<ul>
<li>16.00</li>
<li>14.00</li>
<li>12.00</li>
<li>10.00</li>
<li>8.00</li>
<li>6.00</li>
<li>4.00</li>
<li>2.00</li>
<li>0.00</li>
</ul>
</div>
</div>
</body>
</html>
