今天小编跟大家讲解下有关CSS实现圆柱型数据报表的方法 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS实现圆柱型数据报表的方法 的相关资料，希望小伙伴们看了有所帮助。
本文实例讲述了CSS实现圆柱型数据报表的方法。分享给大家供大家参考。具体分析如下：
这里演示用CSS代码实现圆柱型数据报表效果的方法 实际上是用CSS控制背景图片的平铺范围 来达到圆柱体的高低效果 这只是一个比较简单的CSS数据报表演示 更复杂的功能需要慢慢不断的运用CSS 不断积累知识。
复制代码代码如下:<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>圆柱型数据报表</title><meta http-equiv="Content-Type"content="text/html; charset=utf-8"><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(//img.jbzj.com/file_images/article/201505/2015512175921323.gif) center 1.6em no-repeat;}.chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url(//img.jbzj.com/file_images/article/201505/2015512175912559.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>
运行效果如下图所示：
希望本文所述对大家的div+css网页设计有所帮助。
来源：爱蒂网
