網頁柵格系統研究(4):技術實現

來源:互聯網
上載者:User

前三篇文章中,明確了柵格系統的設計細節和適用範圍。這一篇將集中討論960柵格系統的技術實現。

Blueprint的實現

Blueprint是一個完整的CSS架構,柵格系統是它的一部分功能。我們來看demo頁面:

以上三欄布局的代碼為:

<style type="text/css">    .container { margin: 0 auto; width: 950px }    .span-8 { float: left; margin-right: 10px }    div.last { margin-right: 0 }    hr { clear: both; height: 0; border: none }</style><div class="container">    <div class="span-8"></div>    <div class="span-8"></div>    <div class="span-8 last"></div>    <hr /></div>

上面是準系統,Blueprint還支援append-n, prepend-m, border等“進階”功能,這些就不細說了。Blueprint的特點簡單總結如下:

  1. 採用浮動來實現布局,簡單明了
  2. 950兩側沒有margin, 最後一列的class需要加上last
  3. 採用額外標籤來清除浮動

960.gs的實現

談到960柵格系統,不得不提960.gs. Nathan Smith在這篇文章中,詳細闡述了他的想法和設計思路。這裡有個demo頁面,核心代碼很簡單:

<style type="text/css">    .container_12 { margin: 0 auto; width: 960px }    .grid_4 { float: left; margin: 0 10px }</style><div class="container_12">    <div class="grid_4"></div>    <div class="grid_4"></div>    <div class="grid_4"></div>    <div class="clear"></div></div>

上面就構建了三欄布局:

有意思的幾點:

  1. margin是均勻放在950兩側的
  2. 所有grid除了寬度不同,左右邊距都一致margin: 0 10px;
  3. 代碼簡單清晰,起始和結束列不需要添加額外class

很明顯,Blueprint和960.gs都是採用浮動來實現布局的,主容器需要添加額外標籤來清除浮動(可以參考這裡)。當然,這也不是什麼大問題,請看這篇文章的總結,不添加額外標籤也可以清除浮動。

YUI的實現

接著來看大名鼎鼎的YUI Grids CSS. YUI的CSS架構由三個檔案組成:

reset.css - 樣式重設fonts.css - 版式字型控制grids.css - 柵格系統

我們從demo開始:

注意,demo連結中的寬度是750的,但我們只要將<div id="doc"></div>中的id改為doc2, 頁面寬度就自動變為950寬了(YUI非常強大^o^)。來看下dom結構:

採用的也是浮動布局,簡化後的CSS代碼為:

<style type="text/css">    .doc2 { margin: auto; width: 73.076em }    .yui-u { float: left; margin-left: 1.99%; width: 32% }    div.first { margin-left: 0 }    #ft { clear: both }</style>

YUI的特點是:

  1. 依舊是採用浮動布局,槽(Gutter)寬通過margin-left來控制(Blueprint採用右邊距,960.gs採用均分,這三個架構對槽的處理實在有意思)
  2. 總寬度採用em, 這樣可以用在彈性布局上
  3. 欄的布局用的是百分比,採用了流體布局

YUI的好處是能用來做調適型配置,在這前面兩個架構裡是沒有的。但普通的定寬布局,YUI則顯得有點麻煩,比如我們要實現四欄布局,dom得這樣寫:

先來兩個兩欄布局,再細分為四欄布局,清晰度上欠佳。

更多柵格實現

柵格化更多是一種布局思想,實現技術可以千差萬別。比如今年冒出來的偽絕對位置,立刻就可以用來實現柵格系統。明城兄弟就嘗試了一把。

肯定還有非常多的柵格化實現方案,這裡就不一一挖掘了。

雙飛翼柵格系統

挺奇怪這個名字?請先閱讀這篇文章:漸進增強式布局探討. 簡單說,雙飛翼布局是一種布局實現技術,可以利用它來實現一整套柵格系統。

先看test頁面:Grids Layout Test.

具體技術細節在漸進增強式布局探討一文中已經闡述,這裡不再重複。有幾點需要說明:

  1. 這套柵格系統並不能實現所有布局。這和YUI Grids類似,只能實現預定的一些布局。比如三欄布局,目前只加入了5 : 13 : 6, 5 : 12 : 7, 9 : 9 : 6, 8 : 8 : 8四種情況,這是從淘寶的現有頁面中分析總結出來的。對於同一個網站來說,太多不同的三欄比例不是好事(淘寶目前都有點多,以後可能還會進一步統一)。因此如果採用這套柵格系統的話,需要先分析網站,定義出一套合適的比例。這裡有個所有比例的自動產生工具:grids_css_generator.html.
  2. 關於命名:.grid-c2-s6表示兩欄(c2: column 2)布局,sub欄的寬度是4列(s4: sub width is 4 * 40 -10). 而.grid-c2-s6f, 最後的f表示兩欄布局的第二種情況,即submain互換。類似地,.grid-c3-s5e6d表示三欄布局,其中sub欄的寬度是5, extra欄的寬度是6, 最後的d表示是s5e6三欄布局中的第四種情況。
  3. 為了方便使用,將最常用的兩欄布局.grid-c2-s5.grid-c2直接表示。同樣的,.grid-c3表示.grid-c3-s5e6. 這是淘寶的預設值,其他網站可以根據實際情況修改。
  4. 這套布局符合漸進增強式工作流程。細心的你可能已經發現,所有兩欄布局和三欄布局,HTML中的DOM結構是完全一樣的,只有最外層divclass不同。如果要交換左右欄,只要非常簡單的修改下class就可以。
  5. 實際使用時,兩欄布局和三欄布局已經夠用。其實有了兩欄,其它布局就都可以組合出來。這裡有一個嘗試性頁面:grids_test4_v0.1.html. 組合布局看起來很強大,但實際使用時會把問題搞複雜,不推薦使用,乾脆忘掉吧。

最後來看下兩個測試頁面:兩欄布局grid-c2_test.html 和 三欄布局grid-c3_test.html.

目前除了發現在ie6下有個bug(超大圖片等會撐亂布局,其實可以用overflow: hidden來解決,但考慮overflow的負面影響,最後還是由布局內部的模組來自主控制的好),尚未發現其他問題。

小結

柵格系統更多的是一種布局思想,在實際使用時,根據具體需求選用合適的技術來實現即可。需要注意的是,對於柵格的技術實現來說,太靈活未必是件好事,適度靈活最難得。怎麼才能適度呢?這需要瘋狂實踐 + 不斷的反思 + 持續的重構 + 悟…

柵格搭好了頁面架構,接下來很重要的一件事情就是往裡面新增內容模組。讓內容模組正常化,讓頁面產生工業化,對大型網站來說,這是柵格系統最有商業價值的地方。下一篇也是本系列最後一篇將展示柵格系統中的模組化應用。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。