网页设计【DIV+CSS常用的网页布局代码】

  单行一列
以下是引用片段：

 

body { 
margin: 0px; padding: 0px; text-align: center;
 }  
#content {
 margin-left:auto; margin-right:auto; width: 400px; width: 370px;
 } 

两行一列
以下是引用片段：

body 
{ 
margin: 0px; padding: 0px; text-align: center;
}  
#content-top 
{ 
margin-left:auto; margin-right:auto; width: 400px; width: 370px;
}  
#content-end 
{
margin-left:auto; margin-right:auto; width: 400px; width: 370px;
}

三行一列
以下是引用片段：

body
 { 
margin: 0px; padding: 0px; text-align: center;
 }  
#content-top 
{ 
margin-left:auto; margin-right:auto; width: 400px; width: 370px; 
}  
#content-mid 
{
 margin-left:auto; margin-right:auto; width: 400px; width: 370px;
 }  
#content-end 
{ 
margin-left:auto; margin-right:auto; width: 400px; width: 370px; 
}

单行两列
以下是引用片段：

#bodycenter 
{ 
width: 700px;margin-right: auto; margin-left: auto;overflow: auto;
 }  
#bodycenter #dv1
 {
float: left;width: 280px;
}  
#bodycenter #dv2
 {
float: right;width: 410px;
} 

两行两列
以下是引用片段：

#header
{
 width: 700px; margin-right: auto;margin-left: auto; overflow: auto;
}  
#bodycenter
 { 
width: 700px; margin-right: auto; margin-left: auto; overflow: auto;
 }  
#bodycenter #dv1 
{ 
float: left; width: 280px;
}  
#bodycenter #dv2
 {
 float: right;width: 410px;
}

三行两列
以下是引用片段：

#header
{ 
width: 700px;margin-right: auto; margin-left: auto; }  
#bodycenter 
{
width: 700px; margin-right: auto; margin-left: auto;
 }  
#bodycenter #dv1 
{
 float: left;width: 280px;
}  
#bodycenter #dv2 
{
 float: right; width: 410px;
}  
#footer
{ 
width: 700px; margin-right: auto; margin-left: auto; overflow: auto; 
} 

单行三列
绝对定位
以下是引用片段：

#left
 { 
position: absolute; top: 0px; left: 0px; width: 120px;
 }  
#middle 
{
margin: 20px 190px 20px 190px; 
}  
#right
 {
position: absolute;top: 0px; right: 0px; width: 120px;
} 

float定位一
xhtml:
以下是引用片段：

<div id="warp">  
<div id="column">  
<div id="column1">这里是第一列</div>  
<div id="column2">这里是第二列</div>  
<div class="clear"></div>  
</div>  
<div id="column3">这里是第三列</div>  
<div class="clear"></div>  
</div> 

CSS:
以下是引用片段：

#wrap
{ 
width:100%; height:auto;
}  
#column
{ 
float:left; width:60%;
}  
#column1
{
 float:left; width:30%;
}  
#column2
{
 float:right; width:30%;
}  
#column3
{
 float:right; width:40%;
}  
.clear
{ 
clear:both;
} 

float定位二
xhtml:
以下是引用片段：

<div id="center" class="column">  
<h1>This is the main content.</h1>  
</div>  
<div id="left" class="column">  
<h2>This is the left sidebar.</h2>  
</div>  
<div id="right" class="column">  
<h2>This is the right sidebar.</h2>  
</div> 

CSS:

以下是引用片段：