前三篇文章中,明確了柵格系統(tǒng)的設(shè)計細節(jié)和適用范圍。這一篇將集中討論960柵格系統(tǒng)的技術(shù)實現(xiàn)。
Blueprint的實現(xiàn)
Blueprint是一個完整的CSS框架,柵格系統(tǒng)是它的一部分功能。我們來看 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的特點簡單總結(jié)如下:
- 采用浮動來實現(xiàn)布局,簡單明了
- 950兩側(cè)沒有margin, 最后一列的class需要加上last
- 采用額外標(biāo)簽來清除浮動
960.gs的實現(xiàn)
談到960柵格系統(tǒng),不得不提 960.gs . Nathan Smith在 這篇文章 中,詳細闡述了他的想法和設(shè)計思路。這里有個 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>
上面就構(gòu)建了三欄布局:
有意思的幾點:
- margin是均勻放在950兩側(cè)的
- 所有g(shù)rid除了寬度不同,左右邊距都一致margin: 0 10px;
- 代碼簡單清晰,起始和結(jié)束列不需要添加額外class
很明顯,Blueprint和960.gs都是采用浮動來實現(xiàn)布局的,主容器需要添加額外標(biāo)簽來清除浮動(可以參考這里)。當(dāng)然,這也不是什么大問題,請看 這篇文章的總結(jié) ,不添加額外標(biāo)簽也可以清除浮動。
YUI的實現(xiàn)
接著來看大名鼎鼎的YUI Grids CSS. YUI的CSS框架由三個文件組成:
reset.css - 樣式重置 fonts.css - 版式字體控制 grids.css - 柵格系統(tǒng)
我們從 demo 開始:
注意,demo鏈接中的寬度是750的,但我們只要將<div id="doc"></div>中的id改為doc2, 頁面寬度就自動變?yōu)?50寬了(YUI非常強大^o^)。來看下dom結(jié)構(gòu):
采用的也是浮動布局,簡化后的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>
出處:Taobao.com UED Team
責(zé)任編輯:moby
上一頁 下一頁 網(wǎng)頁柵格系統(tǒng)研究:技術(shù)實現(xiàn) [2]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評論。
|