用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脚本，根据数据自动生成矩形的方法：）
赞 (0)