当前位置: 网站建设 > 网页设计 > 建站经验 >

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

时间:2013-03-02 04:08来源:未知 作者:admin 点击:

标签:用简单的css实现的圆柱型报表 简单(23)圆柱型(1)Tag(145)运行(7)报表(1)实现(100)CSS(655)
Tag:圆柱型报表 圆柱型报表 运行代码复制代码另存代码珍藏本页 [Ctrl+A 全体抉择 提醒:你可先修正局部代码,再按运行] --> [网站建设之]用简略的css实现的圆柱型报表 用简单的css实现的圆柱型报表,详细后果如下图,你能够运行下面代码框看看详细效果: 图片素材如下: !DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN html head titleSimple accessible Charts/title meta ht
用简单的css实现的圆柱型报表》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302344532013.htm
Tag:圆柱型报表   圆柱型报表  

运行代码复制代码另存代码珍藏本页 [Ctrl+A 全体抉择 提醒:你可先修正局部代码,再按运行]

--> [网站建设之]用简略的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( center 1.6em no-repeat; } .chart li span { display: block; text-indent: -999em; padding-bottom: 90px; background: url( 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>一月<span style="background-position: center -35">: </span><strong>35%</strong></li> <li>二月<span style="background-position: center -40">: </span><strong>40%</strong></li> <li>三月<span style=",用百度广告管家同时投放Adsense和百度推广;background-position: center -87">: </span><strong>87%</strong></li> <li>四月<span style="background-position: center -45">: </span>,用犹太人的智慧建设网站;<strong>45%</strong></li> <li>五月<span style="background-position: center -23">: </span><strong>23%</strong></li> </ul> <p style="clear: both">,用消费者心理来衡量好网站应具备的要素;</p><p>&nbsp;</p> <p style="clear: both"></p><p>&nbsp;</p> <ul class="chart"> <li><em>一月</em><span style="background-position: center -35">: </span><strong>35%</strong></li> <li><em>仲春</em><span style="background-position: center -40">: </span><strong>40%</strong></li> <li><em>三月</em><span style="background-position: center -87">: </span><strong>87%</strong></li> <li><em>四月</em><span style="background-position: center -45">: </span><strong>45%</strong></li> <li><,用户研究的定义与价值;em>蒲月</em><span style="background-position: center -23">,用户界面设计中“状态”和“动作”的表达;: </span><strong>23%</strong></li> </ul> <p style="clear: both"></p><p>&nbsp;</p> </body> </html>


(责任编辑:网站建设)
用简单的css实现的圆柱型报表相关文章
上一篇:用百度广告管家同时投放Adsense和百度推广 下一篇:用纯CSS打造的圆角边框
回到顶部