DIV CSS 佈局教程網

從圖片上我們看到，內容板塊分為左右兩個區域，左邊ContentL寬度是600px，右邊ContentR寬度是300px，但是由於我們要將內邊距設置成15px(這樣才會好看)，所以ContentL的寬度在CSS中就要設置成600-15*2=570px,而右側的ContentR則需要設置成300-15*2=270px；
Html代碼：

<dividdivid="Content"> 
<dividdivid="ContentL">此處為左邊ContentL</div> 
<dividdivid="ContentR">此處為左邊ContentR</div> 
</div> 

CSS代碼:

#Content#ContentL,#Content#ContentR{float:left;padding:15px;}  
#Content#ContentL{width:570px;background:#f0f0f0;}  
#Content#ContentR{width:270px;background:#d3e7f2;}  

頁面效果：

內容部分我們就先做到這裡，最後我們再布局裡面的具體元素，下面接著來布局版權模塊(Footer)

【第六步Footer布局】

這部分結構比較簡單，大家只需要知道怎麼布局就OK了
Html代碼：

<dividdivid="Footer"> 
<p>CSS學習alixixi.com整理</p> 
<p>CSS學習alixixi.com整理</p> 
</div> 

CSS代碼：

#Footer{  
text-align:center;  
background:#68acd3;  
padding:10px0;  
font-size:12px;  
font-family:Arial,Helvetica,sans-serif;  
color:#fff;  
line-height:20px;  
}  

目前效果如下：