免费模板网
当前位置: 澳门永利官方网站>CSS图表> CSS月度每天统计柱状图表

CSS图表

CSS月度每天统计柱状图表

分类:CSS图表 时间:2009/7/7 13:03:13 浏览:14358 次

演示效果截图

本文地址:http://www.5hawgs.com/css-chart/detail-6352.aspx
文章摘要: 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.5hawgs.com/379/css-chart/">
<span class="label">1</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/553/css-chart/">
<span class="label">2</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/683/css-chart/">
<span class="label">3</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/167/css-chart/">
<span class="label">4</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/932/css-chart/">
<span class="label">5</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/020/css-chart/">
<span class="label">6</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/491/css-chart/">
<span class="label">7</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/947/css-chart/">
<span class="label">8</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/729/css-chart/">
<span class="label">9</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/539/css-chart/">
<span class="label">10</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/522/css-chart/">
<span class="label">11</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/718/css-chart/">
<span class="label">12</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/695/css-chart/">
<span class="label">13</span>
<span class="count" style="height: 75%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/443/css-chart/">
<span class="label">14</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/620/css-chart/">
<span class="label">15</span>
<span class="count" style="height: 100%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/129/css-chart/">
<span class="label">16</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/418/css-chart/">
<span class="label">17</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/915/css-chart/">
<span class="label">18</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/830/css-chart/">
<span class="label">19</span>
<span class="count" style="height: 100%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/890/css-chart/">
<span class="label">20</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/033/css-chart/">
<span class="label">21</span>
<span class="count" style="height: 100%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/713/css-chart/">
<span class="label">22</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/075/css-chart/">
<span class="label">23</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/976/css-chart/">
<span class="label">24</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/821/css-chart/">
<span class="label">25</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/380/css-chart/">
<span class="label">26</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/473/css-chart/">
<span class="label">27</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/272/css-chart/">
<span class="label">28</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/984/css-chart/">
<span class="label">29</span>
<span class="count" style="height: 20%">(40)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/680/css-chart/">
<span class="label">30</span>
<span class="count" style="height: 50%">(100)</span>
</a>
</li>
<li>
<a href="http://www.5hawgs.com/334/css-chart/">
<span class="label">31</span>
<span class="count" style="height: 75%">(150)</span>
</a>
</li>
</ul>
</div>
友荐云推荐

上一篇:DIV、UL、LI+CSS制作实用垂直柱状图表

下一篇:水平柱状CSS图表

站长常用工具

最新图表

热门图表

赞助商链接