在我的前一篇教學《牢不可破的九宮格佈局》中，我介紹了一種比較完美的九宮格佈局方法，它能完全彈性地調整自己的寬高，從而實現比較靈活的佈局風格。
然而為了彈性功能完美地體現出來，所付出的代價還是很沉重的，從結構上看，其結構是比較臃腫的，但是每個節點又是必不可少的，無法精簡，否則會導致其靈活性不夠。
在實戰運用中，可能好多設計師不喜歡這種佈局結構，嫌其結構冗餘。
一個完美的九宮格設計應該是一種三層分離的結構，我想達到的理想的九宮格應該是這樣的：
因此，在這篇文章中，我會將這種佈局盡量向著這種理想化的境界靠近，讓它更宜於應用在各個方面。
對於一、二點，又想要保持其靈活性，又想要達到精簡的效果，就是說想“魚和熊掌兼得”，除了應用js封裝外，並無其它的辦法。你可以說這是一種「掩耳盜鈴」的做法，是的，我不得不承認，這種用JS封裝的辦法，本質上說並沒有精簡其結構，只不過將其結構都用動態的方式來創建，但對冗餘的html結構確實有立竿見影的效果，一下子就將所有冗餘的結構化於無形之中。
我們還是從三層分離的做法中了解如何改進我們的九宮格吧。
結構層：
這是我們要盡量精簡的重點區域，我們用js的方式來動態創建其結構，所以現在的結構應該是如下的最原始的結構了：
<div class="box">第一個九宮格盒子</div>
<div class="box" id=「one」>第二個九宮格盒</div>
<div class="box" id=「two」>第三個九宮格盒</div>
我唯一作了一點修改的是，將每個盒子加了一個不同的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;}