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

來源:互聯網
上載者: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>



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

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 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。