日期:2014-05-17 浏览次数:20767 次
第二篇主要还是探讨的960居中布局,还是左中右三部分构成。
?
?
还是先看看效果图:
?

然后上代码:
?
?
<div id="container">
<div id="wrapper">
<!-- 中间content start -->
<div id="content" class="red">
content
</div>
<!-- 中间content end -->
</div>
<!-- 左侧navigation start -->
<div id="navigation" class="yellow">
navigation
</div>
<!-- 左侧navigation end -->
<!-- 右侧extra start -->
<div id="extra" class="orange">
extra
</div>
<!-- 右侧extra end -->
</div>
?
css代码:
?
?
#container{margin:0 auto;width:960px} /*这个定宽960*/
#wrapper{float:left;width:100%;}
#content{margin:0 150px;}
#navigation{float:left;width:150px;margin-left:-960px;} /*定宽了*/
#extra{float:left;width:150px;margin-left:-150px;} /*定宽了*/