css+div页面布局之2-- 固定宽度

<div id="container"> 
  <div id="header"><h1>header</h1></div>
  <div id="wrapper"><!-- 主体文字 -->  
    <div id="content"><p><strong>1) Content here.</strong></p></div>  
  </div>  
  <div id="navigation"><p><strong>2) right part here.</strong></p></div>  
  <div id="extra"><p><strong>3) left part here.</strong></p></div>      
  <div id="footer"><p>footer</p></div>  
</div>

1:2:1固定宽度布局:
body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}  
div#content{text-align:left;margin-left:150px;width:400px;background:lightgreen;}  
div#navigation{text-align:left;float:left;width:150px;margin-left:-700px;background:#B9CAFF}  
div#extra{text-align:left;float:left;width:150px;margin-left:-150px;background:#FF8539}

css+div页面布局之2-- 固定宽度_第1张图片

1:1:2固定宽度布局:
body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}  
div#content{text-align:left;margin-left:300px;width:400px;background:lightgreen;}  
div#navigation{text-align:left;float:left;width:150px;margin-left:-700px;background:#B9CAFF}
div#extra{text-align:left;float:left;width:150px;margin-left:-550px;background:#FF8539} 

css+div页面布局之2-- 固定宽度_第2张图片

2:1:1固定宽度布局:
body {text-align:center;display:block;}
div#container{width:700px;margin:0 auto;}
div#header{text-align:left;width:100%;}
div#footer{text-align:left;width:100%;clear:left;}
div#wrapper{float:left;width:100%}  
div#content{text-align:left;margin-left:0px;width:400px;background:lightgreen;}  
div#navigation{text-align:left;float:left;width:150px;margin-left:-300px;background:#B9CAFF}  
div#extra{text-align:left;float:left;width:150px;margin-left:-150px;background:#FF8539}

css+div页面布局之2-- 固定宽度_第3张图片

你可能感兴趣的:(css+div)