CSS教程:CSS制作漂亮的灵活的图表

2016-02-20 00:08 8 1 收藏

下面图老师小编跟大家分享一个简单易学的CSS教程:CSS制作漂亮的灵活的图表教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

【 tulaoshi.com - Web开发 】

有很多方法可以用来呈现数字, 我们最常用的就是制作一张静态图片. 但你也可以考虑CSS。使用CSS样式化元素来实现数据图表化. 可以使数据的控制更具灵活性。

下面. 你将看到8个CSS技巧. 教你如何使用CSS来制作漂亮、灵活的图表。

1. CSS线条图表数据

这个实例包含了三种图形数据的实现方法。上面的Basic Bar Graph实例中使用了一个div包含图表. 一个strong元素作为柱形的block. 然后再使用百分比来控制柱形的宽度. 这种方法中一个优点就是使用了strong元素而不是段落p元素。另外两个例子则是使用了定义列表dl和无序列表ul实现。

CSS图表制作技术

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)2. 符合标准的可访问的可视化CSS数据图表

作者Wilson Miner研究数据图表的Web accessible可访问性概念和标准兼容性技术. 涉及优势、限制或是说两者取长补短的折中用法。这里有三个使用无序列表ul基本结构实现的实例。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

CSS图表制作技术

3. CSS竖行图表

CSS图表制作技术

这个实例展示的是一个和CSS线条图表数据类似的应用. 使用无序列表ul实现竖行图表效果。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)4. 使用百分比和背景图片创建的CSS图表

在这个例子中. 你可以参考使用预先做好的背景图片完成适当的数据描述。但缺陷就是这个预先设计好的背景图片也会局限住其使用范围. 如果要实现更多的不同效果. 就要增加CSS和文件大小. 同时. 你的HTTP连接数也就会增加。

CSS图表制作技术

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)5. 纯碎的CSS数据图表

这个例子使用定义列表dl标记. 然后在dd定义列表中用span元素来控制柱形区域的高度. 用em元素来显示图表遮罩区域的数值表示和在条形中间的绝对位置。

CSS图表制作技术

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)6. CSS实现小块错综区域图表

至今还没遇到过类似的应用. 但通过这个实例一定可以有效地提高你的CSS应用能力。

CSS图表制作技术

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)7. 定义列表dl实现的CSS线条图表

这个技巧用两个横向线条图表实例来表述dl实现方法. 每一个例子都是使用被赋予class的dl元素来控制图表的宽度百分比。

CSS图表制作技术

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)8. 具备可访问行的CSS线条图表

该实例使用table来控制整天图表的结构. 然后使用CSS样式及背景图片来将图表延伸至适当的宽度。

CSS图表制作技术

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160220/1631367.html

延伸阅读
标签: Web开发
CSS制作的三款漂亮的网页表单,点击这里学习更多CSS教程和CSS视频教程。 漂亮表单,三个颜色    演示CSS文件下载地址:http://www.webjx.com/files/soft/piaoliangbiaodan.rar
标签: Web开发
相信学过CSS的朋友都知道CLASS这个东西,不知道你平时制作网页时是怎么应用的,我是这样来做DIV布局代码的.不知道说的清楚不清楚,凑和看吧 我把class分为2种,布局class,风格class,布局class是骨架,风格class是衣服 举个例子: 比如布局中的左栏 首先它的属性有:是左栏,宽度,背景颜色,字体颜色等 1.首...
标签: Web开发
CSS组合 你不必重复有相同属性的多个选择符,你只要用英文逗号(,)隔开选择符就可以了。 比如,你有如下的代码: h2 { color: red; } .22333 { color: red; } .22333com { color: red; } 则你可以这样写: h2,.22333,.22333com { color: red; } 使用组合,你可以一次定义多个CSS,为你节省很多字节和时间。 CSS嵌套 ...
标签: Web开发
如果使用注释的方法得当的话,为你的CSS文件添加注释可以在开发过程中给予你和其他人很大的帮助。最常见的是为CSS样式规则添加提示信息,不过使用注释对优化组织结构和提升效用也很有帮助。 提示和标签 这是注释最常用的途径,可以为自己或其他开发人员留下提示信息可以避免后期引起的不必要的困惑和麻烦。这种应用简洁性最...
标签: Web开发
style .cal_0 table{     border:none;     font-family:tahoma;     font-size:9px;     text-align:center;     } .cal_0 th{     height:17;     background-image:e­xpression("url("+MyCal.color+"_h.gif)");   ...

经验教程

751

收藏

96
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部