css-layout（布局研究）之二

博客分类：
• css-layout（布局研究）

css-layout（布局研究） 

第二篇主要还是探讨的960居中布局，还是左中右三部分构成。

 

 

还是先看看效果图：

 

然后上代码：

 

 

Html代码  

1. <div id="container">    
2.       <div id="wrapper">    
3.         <!-- 中间content start -->    
4.          <div id="content" class="red">    
5.           content    
6.          </div>    
7.         <!-- 中间content end -->     
8.       </div>    
9.       <!-- 左侧navigation start -->    
10.       <div id="navigation" class="yellow">    
11.         navigation    
12.       </div>    
13.       <!-- 左侧navigation end -->    
14.           
15.       <!-- 右侧extra start -->    
16.       <div id="extra" class="orange">    
17.         extra    
18.       </div>    
19.       <!-- 右侧extra end -->    
20.    </div>    

 

css代码：

 

 

Css代码  

1. #container{margin:0 auto;width:960px}                           /*这个定宽960*/  
2. #wrapper{float:left;width:100%;}    
3. #content{margin:0 150px;}    
4. #navigation{float:left;width:150px;margin-left:-960px;}  /*定宽了*/  
5. #extra{float:left;width:150px;margin-left:-150px;}          /*定宽了*/  

• 查看图片附件

1
顶

0
踩

分享到：

typeof运算符 | css-layout（布局研究）之左右各25%中间50 ...