|
下面看下整合出屬于自己的柵欄布局命名，我將用在公司蛻變網(wǎng)的新版上，來(lái)看下我的命名方法：
(三欄頁(yè)面柵格布局-例：部分列表頁(yè)) Grid-c3-c6e5
class=”grid-c3-w13c6e5″ 完整版
class=”grid-c3-c6e5″ 簡(jiǎn)潔版
注意這里的數(shù)字和上圖中的數(shù)字進(jìn)行對(duì)比，你會(huì)發(fā)現(xiàn)我省掉了w13即最寬的那一欄main（通常最寬的為main），
我將c 和 e這樣除了main之外的窄欄通常固定寬度， main的寬度則為width:100%; 具體實(shí)現(xiàn)如下：
假設(shè)最外層的div 為 <div class=”content”>
.content {
position:relative;
width:總寬減窄欄的寬度;
padding-left&right:窄欄的寬度;
}
窄欄浮動(dòng)，main 絕對(duì)定位
.main {
position:absolute;
top:xx;
left&right:窄欄的寬度;
}
先作下簡(jiǎn)單的說(shuō)明，這里與淘寶網(wǎng)命名不同的是我沒(méi)有采取 s（sub）和 e (extra) 這樣的習(xí)慣，
而是用到了 w(west), c(center), e(east)
—-我將網(wǎng)頁(yè)上的方位分為上北下南左西右東
不使用 l (left) 等上下左右表示是因?yàn)樵谌缢误w等字體下 left 里的 l 與數(shù)字1 很容易造成混亂。
下面是一系列方位柵欄模塊化命名例如：
(兩欄頁(yè)面柵格布局-例：首頁(yè)) Grid-c2-e5
(兩欄頁(yè)面柵格布局-例：商品詳細(xì)頁(yè)) Grid-c2-w6
(兩欄頁(yè)面柵格布局-例：注冊(cè)流程頁(yè)) Grid-c2-e7
方案一：(三欄頁(yè)面柵格布局-例：部分列表頁(yè)) Grid-c3-c6e5
出處：Jeffpan的博客
責(zé)任編輯：bluehearts
上一頁(yè) 淘寶柵欄布局模塊化命名淺析 [1] 下一頁(yè) 淘寶柵欄布局模塊化命名淺析 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 淘寶柵欄布局模塊化命名淺析 [2]
