Layout Gala --- 40 个 CSS 布局(转)

本文介绍了一套由html.it提供的40个布局模板,涵盖流体、固定宽度、两列、三列等多种常见布局形式。每个模板采用统一的HTML结构,并遵循‘重要内容优先加载’原则,确保在不同浏览器上良好的兼容性和性能表现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这套布局模板来自于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 的方法实现,在这套模板中,多采用这种方式。结构清晰,代码简洁,有很多值得学习与借鉴的地方。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值