CSS渐变统计柱形图- CSS样式表 - 软晨网（RuanChen.com）

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS渐变统计柱形图

CSS样式表: 网页页面原结构和CSS写法导致浏览器兼容问题; CSS经验:ul列表不正确使用的趋势; Styleneat帮助你容易阅读和更新CSS文件; CSS的内容注释和作者及文件版本注释; 网页设计制作教程:CSS书写格式; 将CSS按照层叠式结构化重新组织与构建; CSS教程之CSS盒模型; CSS 框架BlueTrip特性; IE7和FF浏览器中右下角图片广告; CSS实例:通过定义渐变边框给图片加阴影; 网页选项卡TAB设计原则和应用案例教程; 8个设计规范的表格Table CSS样式应用; CSS制作的背景动态变化的网页导航; 网页选项卡TAB设计原则和应用案例教程; 使用CSS给图片添加阴影的方法; WEBJX收集20个高质量的免费CSS模板; 13个网页页面浏览器兼容性验证工具; 11个用CSS样式表制作网页按钮的教材; CSS3属性使网站设计增强同时不消弱可用性; 清理无用的CSS样式的几个有用工具

No. « ‹ 71 72 73 74 › »

技术文章搜索

关键字

CSS样式表中的 CSS渐变统计柱形图

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 98 ::

收藏到网摘: n/a

css 兼容性问题this.style.cursor=''''hand'''' 跨浏览器的实践:position:fixed 层的固定定位

以前写柱形图时,用的是宽1px的图片底,给width赋一个百分比出可以实现.昨天晚上写一个小统计时想用CSS写一个渐变的!

用作图工具作一个渐变的长度.看起来能好看一点(宽:187px;高15px)
本来设想是当12%时,图片从左到12%的位置显示,余下的88%不显示,但不占地(看起来和1px的图片底没什么区别).下午时去网罗了一班.发现不占地是不太可能的.
要隐藏图片余下的百分比,先想到了评分.亮和暗用了一张图片,各占图片总高度的一半.我写下了:
<div style="background:url(...) 12% left;width:187px;height:15px;"></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
马上得到了这个:

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
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;}
</style>
</head>
<body>
<dl>
<dd>
<div style="width:5%;"></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:15%;"></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:25%;"><strong>55%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:35%;"><strong>55%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:45%;"><strong>55%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:55%;"><strong>55%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:65%;"><strong>65%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:85%;"><strong>85%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:95%;"><strong>95%</strong></div>
</dd>
</dl>
<dl>
<dd>
<div style="width:100%;"><strong>100%</strong></div>
</dd>
</dl>
</body>
</html>

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

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

css 兼容性问题this.style.cursor=''''hand'''' 跨浏览器的实践:position:fixed 层的固定定位

CSS样式表 中的 CSS渐变统计柱形图

评论 (0) All

CSS样式表中的 CSS渐变统计柱形图