武林網(www.49028c.com)文章簡介：前端規范-布局和模塊命名。

最近在思考怎么完全脫離視覺去思考結構，讓寫出來的結構更有語義？交互原型出來后，怎么讓前端結構和視覺設計同時并行？結構寫完可以先讓程序套模板并且結構不會再修改？視覺設計出來后，前端寫樣式，寫完樣式鏈接到套好的模板？

參考了35王少峰的四方框架，他把結構層單獨拿出來，然后畫格子。 我覺得這個思路很好，布局是屬于視覺的，應該先定義好，免得寫樣式的時候再來修改結構。我參考了一下他的思想，并結合自己的理解，談談布局層的構思。

我們用r表示行，并且清除浮動。為每一行添加索引，方便每一行間距的調節，如圖1所示。

圖1

用c表示列，并且左浮動。為每一列添加索引，方便定義寬度和間距。我們把r2分成三列，如圖2所示。

圖2

我們再把r2c2分成兩行，如圖3所示。

圖3

我們再把r2c2r1分成兩列，如圖4所示。

圖4

這樣結構可以無限制的分下去，并且每一格都有唯一的索引，可以方便的來定義每一格的布局。思路剛成型，還得拿幾個項目來嘗試看看是否可行。