Layout Gala — 40 個 CSS 布局

這套布局模板來自於html.it， 總計 40 個，覆蓋流體、固定寬度、兩列、三列等等各種常見的布局形式。最讓人稱道的是，這 40 個模板採用了完全一致的 HTML 結構(based on the same markup)，並嚴格遵循了“重要內容優先載入”的原則(頁面的content部分)，HTML 與 CSS 部分均能通過 W3C 驗證，同時在 IE/win 5.0+, Opera 8.5+, Firefox 1.5+ 和 Safari 2+都有非常好的相容性。它使用的 HTML 如下：

<div id="container">  <div id="header">Header</div>  <div id="wrapper">    <div id="content">Content</div>  </div>  <div id="navigation">Navigation</div>  <div id="extra">Extra stuff</div>  <div id="footer">Footer</div></div>  

以三列流動布局為例，其 CSS 代碼如下：

div#header{position:relative}div#header h1{height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B}div#header a{position:absolute;right:0;top:23px}div#content p{line-height:1.4}div#navigation{background:#B9CAFF}div#extra{background:#FF8539}div#footer{background: #333;color: #FFF}div#footer p{margin:0;padding:5px 10px}div#footer a{display:inline;padding:0;color: #C6D5FD}div#wrapper{float:left;width:100%}div#content{margin-right: 50%}div#navigation{float:left;width:25%;margin-left:-50%}div#extra{float:left;width:25%;margin-left:-25%}div#footer{clear:left;width:100%}

本例採用浮動加負 margin 的方法實現，在這套模板中，多採用這種方式。結構清晰，代碼簡潔，有很多值得學習與借鑒的地方。有興趣的朋友可以猛點下面的連結，或者下載全套模板的 zip 包。

LayoutGala 打包下載