三層分離的完美九宮格

在我的前一篇教學《牢不可破的九宮格佈局》中，我介紹了一種比較完美的九宮格佈局方法，它能完全彈性地調整自己的寬高，從而實現比較靈活的佈局風格。

然而為了彈性功能完美地體現出來，所付出的代價還是很沉重的，從結構上看，其結構是比較臃腫的，但是每個節點又是必不可少的，無法精簡，否則會導致其靈活性不夠。

在實戰運用中，可能好多設計師不喜歡這種佈局結構，嫌其結構冗餘。

一個完美的九宮格設計應該是一種三層分離的結構，我想達到的理想的九宮格應該是這樣的：

1. 只需要套用一個class樣式給想套用九宮格佈局的容器，就能自動建立這個佈局。結構應該要夠精簡，只用很少的結構就能實現豐富的色彩風格。
2. 能夠將這種佈局樣式套用到一個頁面的多個容器中。
3. 三層分離的設計，能提供豐富的色彩皮膚方案，方便將不同的樣式應用於多個風格迥異的盒子上。
4. 要夠健壯，能相容於大多數瀏覽器。

因此，在這篇文章中，我會將這種佈局盡量向著這種理想化的境界靠近，讓它更宜於應用在各個方面。

對於一、二點，又想要保持其靈活性，又想要達到精簡的效果，就是說想“魚和熊掌兼得”，除了應用js封裝外，並無其它的辦法。你可以說這是一種「掩耳盜鈴」的做法，是的，我不得不承認，這種用JS封裝的辦法，本質上說並沒有精簡其結構，只不過將其結構都用動態的方式來創建，但對冗餘的html結構確實有立竿見影的效果，一下子就將所有冗餘的結構化於無形之中。

我們還是從三層分離的做法中了解如何改進我們的九宮格吧。

結構層：

這是我們要盡量精簡的重點區域，我們用js的方式來動態創建其結構，所以現在的結構應該是如下的最原始的結構了：

我唯一作了一點修改的是，將每個盒子加了一個不同的ID，這為以後創建不同的顏色方式留下一個供樣式表調用的鉤子。透過這個ID在樣式表中創造不同的圖片或顏色風格。

我們應該只需在div容器中新增一個class=”box”，就會成功地建立九宮格佈局。這樣是夠簡潔的了吧！

樣式層：

剛才在結構層中我們埋下了定制樣式的突破點（那個不同的id），那麼在寫樣式時就顯得得心應手了。我們將所有的九個需要改變風格的地方的樣式進行覆蓋性重置，就能得到不同的風格樣式。

當然你可以將不同的圖片應用於background上作為其背景，我只是為了演示方便而調用了顏色值而已，具體的界面風格就看你的設計功夫了。

/*顏色方案一*/
#one .t_l{background:blue;}
#one .t_r{background:blue;}
#one .t_m{background:orange;}
#one .m_l{background:orange;}
#one .m_r{background:orange;}
#one .b_l{background:blue;}
#one .b_r{background:blue;}
#one .b_m span{background:orange;}
#one .context{background:#666;}

/*顏色方案二*/
#two .t_l{background:red;}
#two .t_r{background:red;}
#two .t_m{background:black;}
#two .m_l{background:black;}
#two .m_r{background:black;}
#two .b_l{background:red;}
#two .b_r{background:red;}
#two .b_m span{background:black;}
#two .context{background:#999;}