中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

方案二：(三欄頁面柵格布局-例：部分列表頁) Grid-c3-c7e5

(三欄頁面柵格布局-例：商城主頁、個人空間預覽頁) Grid-c3-w6e5

(三欄頁面柵格布局-例：個人空間管理頁) Grid-c3-w5e6

以上命名都是由class=”grid-c3-w5c13e6″ 這類的完整版去掉main欄目(即最寬的一欄)
簡化到class=”grid-c3-w5e6″ 這類簡潔版(很快可以猜出-w5e6所對應的寬欄位c13，即左邊占24-5-6=13a的main)，
不想用上面的方法為main定width:100%;

那我們可以這樣：

.grid-c3-c6e5 .main{ width:13a;}
.grid-c3-c6e5 .sidebar { width:5a;}
.grid-c3-c6e5 .service { width:6a;}

.grid-c3-c6e5的名字看起來蠻長的,考慮過去掉.grid-c3-c6e5中的 grid 這個單詞，但似乎不太方便閱讀，況且后面會出現(xiàn) .mode-a , .mode-b 之類的模塊命名，統(tǒng)一下會更好；
這里的命名習慣建議使用的表意命名《超越CSS》有提到過。

可以看到簡潔版的只有3個字母出現(xiàn) w (west), c (center), e (east) 上面已經(jīng)做了解釋
不用記太多的字母含義，grid-c3-c6e5這樣的命名方法讓我們更好的對柵格化布局進行操作。

原文：http://www.thefast.cn/?p=350

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2926561-1-1.html

本文鏈接：http://m.95time.cn/tech/web/2009/6685.asp　

出處：Jeffpan的博客
責任編輯：bluehearts

上一頁 淘寶柵欄布局模塊化命名淺析 [2] 下一頁

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。