安忆:DIV+CSS最常用的网页布局代码11例_CSS教程_100天网页设计网

来源：百度文库 编辑：偶看新闻 时间：2024/04/18 11:02:14

div css布局不同于table布局，它主要是按列来计算，而table是嵌套实现。这里列举了最常见的几种布局代码：

单行一列

CSS Code复制内容到剪贴板
  1. body { margin: 0px; padding: 0px; text-align: center; }    
  2. #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  

两行一列

CSS Code复制内容到剪贴板
  1. body { margin: 0px; padding: 0px; text-align: center;}    
  2. #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}    
  3. #content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}  

三行一列

CSS Code复制内容到剪贴板
  1. body { margin: 0px; padding: 0px; text-align: center; }    
  2. #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }     
  3. #content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }    
  4. #content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }  

单行两列

CSS Code复制内容到剪贴板
  1. #bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }    
  2. #bodycenter #dv1 {float: left;width: 280px;}    
  3. #bodycenter #dv2 {float: rightright;width: 410px;}   

两行两列

CSS Code复制内容到剪贴板
  1. #header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}    
  2. #bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }    
  3. #bodycenter #dv1 { float: left; width: 280px;}    
  4. #bodycenter #dv2 { float: rightright;width: 410px;}  

三行两列

CSS Code复制内容到剪贴板
  1. #header{ width: 700px;margin-right: auto; margin-left: auto; }    
  2. #bodycenter {width: 700px; margin-right: auto; margin-left: auto; }    
  3. #bodycenter #dv1 { float: left;width: 280px;}    
  4. #bodycenter #dv2 { float: rightright; width: 410px;}    
  5. #footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }  

 单行三列使用绝对定位

CSS Code复制内容到剪贴板
  1. #left { position: absolute; top: 0px; left: 0px; width: 120px; }    
  2. #middle {margin: 20px 190px 20px 190px; }    
  3. #right {position: absolute;top: 0px; rightright: 0px; width: 120px;}  

 float定位一

XML/HTML Code复制内容到剪贴板
  1.     
  2.     
  3. 这里是第一列
    
  • 这里是第二列
    •     
    •     
  •     
  • 这里是第三列