第二篇主要还是探讨的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;} /*定宽了*/