来谈谈：8个优异的CSS完成数据图表的使用实例

有了CSS，我们不再需要用FONT标签或者透明的1pxGIF图片来控制标题，改变字体颜色，字体样式等等
在Web使用中有良多数据、图表的体现体例，特别在一些数据统计使用对照普遍的网站背景，能够直不雅体现数据的图表使用更是不成短少的一个主要部分。摒弃图片的完成办法，利用纯碎的CSS款式往体现data的统计变更，能更好的增添网站的可会见性和办理的可操纵性。
如今，菠菜博为你先容8个优异的CSS完成数据图表的使用实例。
1，CSS线条图表数据

登录/注册后可看大图

这个实例包括了三种图形数据的完成办法。下面的BasicBarGraph实例中利用了一个<div>包括图表，一个<strong>元素作为柱形的block，然后再利用百分比来把持柱形的宽度，这类办法中一个长处就是利用了<strong>元素而不是段落<p>元素。别的两个例子则是利用了界说列表dl和无序列表ul完成。
会见实例1

2，切合尺度的可会见的可视化数据图表

登录/注册后可看大图

作者WilsonMiner研讨数据图表的Webaccessible可会见性观点和尺度兼容性手艺，触及上风、限定或是说二者扬长避短的折衷用法。这里有三个利用无序列表ul基础布局完成的实例。
会见实例1会见实例2会见实例3
3，CSS竖行图表

登录/注册后可看大图

这个实例展现的是一个和“CSS线条图表数据”相似的使用，利用无序列表ul完成竖行图表效果。
会见实例
4，利用百分比和背景图片创立图表

登录/注册后可看大图

在这个例子中，你能够参考利用事后做好的背景图片完成得当的数据形貌。但缺点就是这个事后计划好的背景图片也会范围住其利用局限，假如要完成更多的分歧效果，就要增添CSS和HTML文件巨细，同时，你的HTTP毗连数也就会增添。
会见实例
5，纯碎的CSS数据图表

登录/注册后可看大图

这个例子利用界说列表dl标志，然后在<dd>界说列表顶用<span>元从来把持柱形地区的高度，用<em>元从来显现图表遮罩地区的数值暗示和在条形两头的相对地位。
会见实例
6，CSS完成小块错综地区图表

登录/注册后可看大图

至今还没碰到过相似的使用，但经由过程这个实例必定能够无效地进步你的CSS使用才能。
会见实例
7，界说列表dl完成线条图表

登录/注册后可看大图

这个技能用两个横向线条图表实例来表述dl完成办法，每个例子都是利用被付与class的dl元从来把持图表的宽度百分比。
会见实例
8，具有可会见行的线条图表

登录/注册后可看大图

该实例利用table来把持成天图表的布局，然后利用CSS款式及背景图片来将图表延长至得当的宽度。
会见实例
原文地点：8CSSTechniquesforChartingData

Table中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div更能体现样式和结构相分离，结构的重构性强。

HTML技术的不断发展和完善，随之而产生了众多网页编辑器，从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器（则原始代码编辑器）

Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。