用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腳本，根據數據自動生成矩形的方法：）