日期:2014-05-17 浏览次数:20854 次
可能可能项目中的布局还是比较的简单,以前写过一篇调研性质的layout相关的文章:探究页面布局之960的概念是否还存在
?
作为新的布局研究专题的第一篇还是看看这样一种布局:
?
左右各占25%,中间(主体内容)占50%,宽度自适应(外容器铺满)
?
先看看效果图:
?

?
?
?
直接上代码吧:
?
?
<div id="container">
<div id="wrapper">
<!-- 中间content start -->
<div id="content">
content
</div>
<!-- 中间content end -->
</div>
<!-- 左侧navigation start -->
<div id="navigation">
navigation
</div>
<!-- 左侧navigation end -->
<!-- 右侧extra start -->
<div id="extra">
extra
</div>
<!-- 右侧extra end -->
</div>
?
css部分: (没有包含reset的部分)
?
?
#wrapper{float:left;width:100%;}
#content{margin:0 25%;}
#navigation{float:left;width:25%;margin-left:-100%;}
#extra{float:left;width:25%;margin-left:-25%;}