CSS渐变统计柱形图_ Div+Css教程-查字典教程网
CSS渐变统计柱形图
CSS渐变统计柱形图
发布时间:2016-12-29 来源:查字典编辑
摘要:用作图工具作一个渐变的长度.看起来能好看一点(宽:187px;高15px)本来设想是当12%时,图片从左到12%的位置显示,余下的88%不显...

用作图工具作一个渐变的长度.看起来能好看一点(宽:187px;高15px)

本来设想是当12%时,图片从左到12%的位置显示,余下的88%不显示,但不占地(看起来和1px的图片底没什么区别).下午时去网罗了一班.发现不占地是不太可能的.

要隐藏图片余下的百分比,先想到了评分.亮和暗用了一张图片,各占图片总高度的一半.我写下了:

<div></div>

依次从10%-100%,见不到效果,换<span></span>这个是可以不过在盒子内必须要有内容.

昨天晚上没写出来.下午google了也没有找到类4渐变的.不过从其中一个示例中得到了灵感.

URL:http://apples-to-oranges.com/blog/post/css-for-bar-graphs/?id=55

中的:Complex CSS Bar Graph

马上得到了这个:

无标题文档 dl{margin:0;padding:0;width:187px;} dd{position:relative;display:block;float:left;width:187px;height:15px; margin:0;border:1px solid #eee;} * html dd{ float: none; } dd div{position:relative;background:url("../image/default/Percent.gif");height:15px;width:100%;text-align:right;} 55% 55% 55% 55% 65% 75% 85% 95% 100%

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

有同需求的兄弟可以参考一下

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类