網頁柵格化是什麽啊？誰有這方面的教程？

在行動前做出些準備，於是先是為網站做了?柵格化設計，總寬950的24欄柵格。?

來公司的時間不算很長，最近公司現有的?蛻變網?將要進行壹次大的改版，作為公司的前端開發人員自然要在行動前做出些準備，於是先是為網站做了?柵格化設計，總寬950的24欄柵格。OK,廢話不多說，下面趕緊開始。?

我們可以看到?class=”grid-c3-s5e7〃?這個命名似乎有些特別，

再看看其包含的class=”col-main”?和?class=”col-sub”?以及?class=”col-extra?skin-orange”

再多壹些樣本代碼：

.grid-c,?.grid-c2-s4,?.grid-c2-s4f,?.grid-c2,?.grid-c2f,?.grid-c2-s6,?.grid-c2-s6f,?.grid-c2-s7,?.grid-c2-s7f,?.grid-c2-s8,?.grid-

本篇文章來源於?源碼動力?轉載請以鏈接形式註明出處?網址：/Design/webpagemake/200905/78721.html

c2-s8f,?.grid-c2-s9,?.grid-c2-s9f,?.grid-c2-s10,?.grid-c2-s10f,?.grid-c2-s11,?.grid-c2-s11f,?.grid-c2-s12,?.grid-c2-s12f,?.grid-c3,?.grid-c3f,?.grid-c3e,?.grid-c3d,?.grid-c3c,?.grid-c3b,?.grid-c3-s5e7,?.grid-c3-s5e7f,?.grid-c3-s5e7e,?.grid-c3-s5e7d,?.grid-c3-s5e7c,?.grid-c3-s5e7b,?.grid-c3-s9e6,?.grid-c3-s9e6f,?.grid-c3-s9e6e,?.grid-c3-s9e6d,?.grid-c3-s9e6c,?.grid-c3-s9e6b,?.grid-c3-s8e8,?.main-wrap,?.col-sub,?.col-extra?{

}

我們選擇其中壹個來仔細看下可以嘗試著作出這樣的解釋:

上圖中?s5e7?裏的?5?和?7?代表的是在?24欄?中所占的欄數。

如下這樣更方便我們進行模塊化操作：

.grid-c3?{}

.grid-c3-s5e7?{}

.grid-c3-s5e7?col-main?{}

.grid-c3-s5e7?col-sub?{}

.grid-c3-s5e7?col-extra?{}

.grid-c2?{}

.grid-c2-s7f?{}

.grid-c2-s7f?col-main?{}