- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
用CSS代码实现的圆柱型数据报表效果实例，实际上是用CSS控制背景图片的平铺范围，来达到圆柱体的高低效果，这只是一个比较简单的CSS数据报表演示，更复杂的功能需要慢慢不断的运用CSS，不断积累知识。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Simple accessible Charts</title> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <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(/jscss/demoimg/200902/chart_bg.gif) center 1.6em no-repeat; } .chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url(/jscss/demoimg/200902/chart_bg_ol.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><em>一月</em><span style="background-position: center -35">: </span><strong>36%</strong></li> <li><em>二月</em><span style="background-position: center -40">: </span><strong>56%</strong></li> <li><em>三月</em><span style="background-position: center -87">: </span><strong>92%</strong></li> <li><em>四月</em><span style="background-position: center -45">: </span><strong>48%</strong></li> <li><em>五月</em><span style="background-position: center -23">: </span><strong>31%</strong></li> </ul> <p style="clear: both"></p><p> </p> </body> </html>