|
YUI的特點(diǎn)是：
- 依舊是采用浮動(dòng)布局，槽（Gutter）寬通過(guò)margin-left來(lái)控制（Blueprint采用右邊距，960.gs采用均分，這三個(gè)框架對(duì)槽的處理實(shí)在有意思）
- 總寬度采用em, 這樣可以用在彈性布局上
- 欄的布局用的是百分比，采用了流體布局
YUI的好處是能用來(lái)做自適應(yīng)布局，在這前面兩個(gè)框架里是沒(méi)有的。但普通的定寬布局，YUI則顯得有點(diǎn)麻煩，比如我們要實(shí)現(xiàn)四欄布局，dom得這樣寫(xiě)：
先來(lái)兩個(gè)兩欄布局，再細(xì)分為四欄布局，清晰度上欠佳。
更多柵格實(shí)現(xiàn)
柵格化更多是一種布局思想，實(shí)現(xiàn)技術(shù)可以千差萬(wàn)別。比如今年冒出來(lái)的 偽絕對(duì)定位 ，立刻就可以用來(lái)實(shí)現(xiàn)柵格系統(tǒng)。明城兄弟就 嘗試了一把。
肯定還有非常多的柵格化實(shí)現(xiàn)方案，這里就不一一挖掘了。
雙飛翼柵格系統(tǒng)
挺奇怪這個(gè)名字？請(qǐng)先閱讀這篇文章：漸進(jìn)增強(qiáng)式布局探討. 簡(jiǎn)單說(shuō)，雙飛翼布局是一種布局實(shí)現(xiàn)技術(shù)，可以利用它來(lái)實(shí)現(xiàn)一整套柵格系統(tǒng)。
先看test頁(yè)面：Grids Layout Test.
具體技術(shù)細(xì)節(jié)在 漸進(jìn)增強(qiáng)式布局探討 一文中已經(jīng)闡述，這里不再重復(fù)。有幾點(diǎn)需要說(shuō)明：
- 這套柵格系統(tǒng)并不能實(shí)現(xiàn)所有布局。這和YUI Grids類(lèi)似，只能實(shí)現(xiàn)預(yù)定的一些布局。比如三欄布局，目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四種情況，這是從淘寶的現(xiàn)有頁(yè)面中分析總結(jié)出來(lái)的。對(duì)于同一個(gè)站點(diǎn)來(lái)說(shuō)，太多不同的三欄比例不是好事（淘寶目前都有點(diǎn)多，以后可能還會(huì)進(jìn)一步統(tǒng)一）。因此如果采用這套柵格系統(tǒng)的話(huà)，需要先分析站點(diǎn)，定義出一套合適的比例。這里有個(gè)所有比例的自動(dòng)生成工具：grids_css_generator.html.
- 關(guān)于命名：.grid-c2-s6表示兩欄（c2: column 2）布局，sub欄的寬度是4列（s4: sub width is 4 * 40 -10）. 而.grid-c2-s6f, 最后的f表示兩欄布局的第二種情況，即sub和main互換。類(lèi)似地，.grid-c3-s5e6d表示三欄布局，其中sub欄的寬度是5, extra欄的寬度是6, 最后的d表示是s5e6三欄布局中的第四種情況。
- 為了方便使用，將最常用的兩欄布局.grid-c2-s5用.grid-c2直接表示。同樣的，.grid-c3表示.grid-c3-s5e6. 這是淘寶的默認(rèn)值，其他站點(diǎn)可以根據(jù)實(shí)際情況修改。
- 這套布局符合漸進(jìn)增強(qiáng)式工作流程。細(xì)心的你可能已經(jīng)發(fā)現(xiàn)，所有兩欄布局和三欄布局，HTML中的DOM結(jié)構(gòu)是完全一樣的，只有最外層div的class不同。如果要交換左右欄，只要非常簡(jiǎn)單的修改下class就可以。
- 實(shí)際使用時(shí)，兩欄布局和三欄布局已經(jīng)夠用。其實(shí)有了兩欄，其它布局就都可以組合出來(lái)。這里有一個(gè)嘗試性頁(yè)面：grids_test4_v0.1.html. 組合布局看起來(lái)很強(qiáng)大，但實(shí)際使用時(shí)會(huì)把問(wèn)題搞復(fù)雜，不推薦使用，干脆忘掉吧。
最后來(lái)看下兩個(gè)測(cè)試頁(yè)面：兩欄布局grid-c2_test.html 和 三欄布局grid-c3_test.html.
目前除了發(fā)現(xiàn)在ie6下有個(gè)bug（超大圖片等會(huì)撐亂布局，其實(shí)可以用overflow: hidden來(lái)解決，但考慮overflow的負(fù)面影響，最后還是由布局內(nèi)部的模塊來(lái)自主控制的好），尚未發(fā)現(xiàn)其他問(wèn)題。
小結(jié)
柵格系統(tǒng)更多的是一種布局思想，在實(shí)際使用時(shí)，根據(jù)具體需求選用合適的技術(shù)來(lái)實(shí)現(xiàn)即可。需要注意的是，對(duì)于柵格的技術(shù)實(shí)現(xiàn)來(lái)說(shuō)，太靈活未必是件好事，適度靈活最難得。怎么才能適度呢？這需要瘋狂實(shí)踐 + 不斷的反思 + 持續(xù)的重構(gòu) + 悟…
柵格搭好了頁(yè)面框架，接下來(lái)很重要的一件事情就是往里面添加內(nèi)容模塊。讓內(nèi)容模塊規(guī)范化，讓頁(yè)面生成工業(yè)化，對(duì)大型站點(diǎn)來(lái)說(shuō)，這是柵格系統(tǒng)最有商業(yè)價(jià)值的地方。下一篇也是本系列最后一篇將展示柵格系統(tǒng)中的模塊化應(yīng)用。
本文鏈接：http://m.95time.cn/tech/web/2008/6272.asp 
出處：Taobao.com UED Team
責(zé)任編輯：moby
上一頁(yè) 網(wǎng)頁(yè)柵格系統(tǒng)研究:技術(shù)實(shí)現(xiàn) [1] 下一頁(yè)
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 網(wǎng)頁(yè)柵格系統(tǒng)研究:技術(shù)實(shí)現(xiàn) [2]
