用简单的css实现的圆柱型报表_建站学-个人建站指南,网页制作,网站设计,网站制作教程

用简单的css实现的圆柱型报表,具体效果如下图,你可以运行下面代码框看看具体效果:

图片素材如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Simple accessible Charts</title> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <style type="text/css"> .chart { font-family: Tahoma; font-size: 12px; border: 1px solid #ccc; float: left; margin: 0; padding: .4em .1em; } .chart li { list-style: none; float: left; width: 5em; text-align: center; background: url(http://webdesign.jzxue.com/System/uploads/allimg/090628/2302081.gif) center 1.6em no-repeat; } .chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url(http://webdesign.jzxue.com/System/uploads/allimg/090628/2302082.gif) center -1px no-repeat; border-top: 5px solid #fff; } .chart strong { display: block; text-align: center; font-weight: normal; } </style> </head> <body> <ul class="chart"> <li>一月: 35%</li> <li>二月: 40%</li> <li>三月: 87%</li> <li>四月: 45%</li> <li>五月: 23%</li> </ul>     <ul class="chart"> <li>一月: 35%</li> <li>二月: 40%</li> <li>三月: 87%</li> <li>四月: 45%</li> <li>五月: 23%</li> </ul>   </body> </html>

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

(责任编辑：admin)

搜索

热门标签:

用简单的css实现的圆柱型报表