演示效果截图

CSS代码

<style type="text/css" media="screen">
* { 
margin: 0; 
padding: 0; 
list-style-type: none;}
body { 
font-family: Helvetica, Arial, sans-serif; 
color: #333; }
a { 
color: #2D7BB2; 
text-decoration: none; 
font-weight: bold; }
a:hover { 
color: #333; }
h2, h3, h4 { 
clear: both; 
margin: 0 0 0.6em 0;}
h3 { 
color: #666; }
.section { 
float: left;
clear: left;
padding: 1em 2em;}
/* TIMELINE CHARTS */
.timeline { 
font-size: 0.75em; 
height: 10em; 
width: 53em;}
.timeline li { 
position: relative;
float: left;
width: 1.5em; 
margin: 0 0.1em;
height: 8em;}
.timeline li span { 
cursor:pointer;}
.timeline li a { 
display: block;
height: 100%;}
.timeline li .label { 
display: block; 
position: absolute; 
bottom: -2em; 
left: 0; 
background: #fff; 
width: 100%; 
height: 2em; 
line-height: 2em; 
text-align: center;}
.timeline li a .count { 
display: block; 
position: absolute; 
bottom: 0; 
left: 0; 
height: 0; 
width: 100%; 
background: #AAA; 
text-indent: -9999px; 
overflow: hidden;}
.timeline li:hover { 
background: #EFEFEF;}
.timeline li a:hover .count { 
background: #2D7BB2;}
</style>

HTML代码

<div class="section">
<h2>CSS月度每天统计柱状图表</h2>
<h3>www.865171.cn</h3>
<h4>2009.7.7</h4>
<ul class="timeline">
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">1</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">2</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">3</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">4</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">5</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">6</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">7</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">8</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">9</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">10</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">11</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">12</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">13</span>
<span class="count" style="height: 75%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">14</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">15</span>
<span class="count" style="height: 100%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">16</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">17</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">18</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">19</span>
<span class="count" style="height: 100%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">20</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">21</span>
<span class="count" style="height: 100%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">22</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">23</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">24</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">25</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">26</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">27</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">28</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">29</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">30</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.865171.cn/css-chart/">
<span class="label">31</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
</ul>
</div>