.container..." />

搜尋

隨機推薦

23 十一月 2010

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

前三篇文章中,明確了柵格系統的設計細節和適用範圍。這一篇將集中討論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. 廣告

  4. 採用額外標籤來清除浮動

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>

上面就構建了三欄佈局:

廣告

无觅相关文章插件,快速提升流量

Please publish modules in offcanvas position.