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 打包下载