用CSS画矩形统计表

矩形统计表，就是通过矩形形状形象地表达出数据间的数量，关系。用CSS能否处理得了呢？
其实不难，画矩形其实就是一个DIV加上背景色就行了。下面一起看下。

操作方法

（01）首先我们看下，一个简单的矩形，在Html，css里，是怎样画出来的？html就是一个简单的div，如图

（02）看下，css样式，我们设置了高度，宽度，和背景色，

（03）看下效果，就是一个标准的长方形矩形。

（04）我们可以通过修改长度，宽度来改变矩形的形状大小，也可以通过修改背景色来改变颜色，如图：

（05）我们接着做一个完整的应用矩形的例子，矩形统计表，html的代码如图，样式class为jx的div就是矩形图，不同的高度由height来决定，颜色由背景色background-color决定，关键就这二点，其他没什么特别的地方。

（06）再看下css代码的定义，如图，css上也没什么特别的地方，矩形div 我们设置 display: inline-block; 让他们并行排列，而不是一行一个。

（07）最后看下效果图，很标准的统计图。数据改动也很方便把高度，颜色修改下就行。下次写个JS脚本，根据数据自动生成矩形的方法：）