很漂亮的一个css实现的统计实例_建站学-个人建站指南,网页制作,网站设计,网站制作教程

给大家一个介绍一个css实现的统计实例，效果如下：

<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Timeline / Accessible Data Examples</title> <style type="text/css" media="screen"> /* SETUP */ * { 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 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> </head> <body> <div class="section"> <h2>Timeline chart</h2> <h4>©2010.3 JZxue.com</h4> <ul class="timeline"> <li> <a href="http://www.example.com/2007/dec/1/" title="December 1, 2007: 40"> 1 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/2/" title="December 2, 2007: 100"> 2 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/3/" title="December 3, 2007: 150"> 3 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/4/" title="December 4, 2007: 40"> 4 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/5/" title="December 5, 2007: 100"> 5 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/6/" title="December 6, 2007: 40"> 6 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/7/" title="December 7, 2007: 40"> 7 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/8/" title="December 8, 2007: 100"> 8 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/9/" title="December 9, 2007: 150"> 9 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/10/" title="December 10, 2007: 40"> 10 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/11/" title="December 11, 2007: 100"> 11 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/12/" title="December 12, 2007: 40"> 12 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/13/" title="December 13, 2007: 150"> 13 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/14/" title="December 14, 2007: 100"> 14 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/15/" title="December 15, 2007: 200"> 15 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/16/" title="December 16, 2007: 40"> 16 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/17/" title="December 17, 2007: 100"> 17 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/18/" title="December 18, 2007: 150"> 18 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/19/" title="December 19, 2007: 200"> 19 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/20/" title="December 20, 2007: 100"> 20 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/21/" title="December 21, 2007: 200"> 21 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/22/" title="December 22, 2007: 40"> 22 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/23/" title="December 23, 2007: 100"> 23 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/24/" title="December 24, 2007: 150"> 24 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/25/" title="December 25, 2007: 150"> 25 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/26/" title="December 26, 2007: 40"> 26 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/27/" title="December 27, 2007: 100"> 27 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/28/" title="December 28, 2007: 150"> 28 (150) </a> </li> <li> <a href="http://www.example.com/2007/dec/29/" title="December 29, 2007: 40"> 29 (40) </a> </li> <li> <a href="http://www.example.com/2007/dec/30/" title="December 30, 2007: 100"> 30 (100) </a> </li> <li> <a href="http://www.example.com/2007/dec/31/" title="December 31, 2007: 150"> 31 (150) </a> </li> </ul> </div> </body> </html>

[ 提示：你可先修改部分代码，再按Ctrl+A 全部选择 ]

(责任编辑：admin)

搜索

热门标签:

很漂亮的一个css实现的统计实例