CSS月度每天统计柱状图表

CSS月度每天统计柱状图表

演示效果截图

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>