摘要:DIV + CSS基本介紹與單欄架構
CSS+DIV進行網頁重構相對與傳統的TABLE網頁布局而具有以下4個顯著優勢：
1：設計和內容可以做區分
將設計部分做區隔出來放在一個獨立樣式文件中，HTML文件中只存放文本信息。
2：提高搜索引擎對網頁的索引效率
用只包含結構化內容的HTML代替嵌套的標簽，搜索引擎將更有效地搜索到你的網頁內容。
3：提高頁面瀏覽速度
對於同一個頁面視覺效果，採用CSS+DIV重構的頁面容量要比TABLE編碼的頁面語法少太多了，前者一般只有後者的1/2大小。
4：容易維護和改版
簡單的修改幾個CSS文件就可以重新設計整個網站的頁面。
從以上的描述來看，採用CSS+DIV對製作網站可以提升網站用戶與搜索引擎的友好度。
CSS+DIV所以成為目前網頁設計主流，在我看主要核心原因，其實不僅僅是其符合W3C標準，而是通過採用CSS+DIV，網頁程式也比較好超作，已經把設計與程式分離了
現在div+css已經很風靡了，各大網站都重新製作成div+css模式，採用層和CSS後網頁打開速度快了很多。
從SEO的角度來分析用DIV+CSS進行網站建構必要性:
1. 用div+css構架的網站容易向W3C標準靠攏，網站是否符合W3C標準是搜索引擎給網頁排名的一個影響因素，特別是YAHOO，它看的比較重。
2. 網站原始碼變簡單了，除了幾個div,ul,li,dl,dd,dt之類的標籤外，幾乎不用其他標籤，網站內容完全裸露在關鍵字搜尋引擎面前，便於抓取關鍵內容，加強關鍵內容的頁面的比重，從而為排名因素增加比重。
3. 關鍵字更容易閱讀到了。一般的站點都是左中右三欄式，頁面的主要內容是在中間一欄，而關鍵字搜尋頁面內容是按照從上而下，從左至右的順序進行的，如果你的左欄內容比較多，內容的關鍵字搜尋就會下降。而用div+css就可以把主要先寫在前面，在寫左欄，右欄內容，通過CSS一定位就可以了。
4. 對於常用的表格佈局，如果想改佈局，可能就要動到全部，網站層結構如果設計的合理，可以用CSS很輕鬆的改變網站的表現，這就是結構和內容，行為的分離。 如果網站結構定期改動，自然對關鍵字搜尋的影響力也不小。
CSS+DIV的架構作好，之後在網路優化(SEO)的層面就會更輕鬆了。
Wrapper 外層
|
DIV架構
<div id="HEADER">....</div> <!--Header上橫幅 -->
<div id="MAIN_NAV">....</div> <!--MAIN_NAV主選單 -->
<div id="CONTENT">....</div> <!--CONTENT內容區 -->
<div id="FOOTER"> ...</div> <!--FOOTER頁尾 -->
</div> <!--最外層包裝 結尾-->
CSS設定
width: 800px;
margin:0 auto;
padding:0 10px;}
/*---- 頁首 ----*/
#HEADER {
background-color: #FFFFFF;
}
#HEADER h1 a {
text-indent: -9999px;
display: block;
width: 800px;
height: 200px;
}
/*---- 主選單 ----*/
#MAIN_NAV {
background-color: #000000;
overflow:auto;
width: 800px;
}
#MAIN_NAV ul {
list-style-type:none;
}
#MAIN_NAV li {
float: left;
}
#MAIN_NAV li a {
display: block;
padding: 5px 10px 5px 10px;
background-color: #000000;
color: #FFFFFF;
font-weight: bold;
font-family: Arial;
font-size: 12px;
text-decoration: none;
border-right:1px solid #FFFFFF;
}
#MAIN_NAV li a:hover {
background-color: #FFFFFF;
color: #000000;
}
/*---- 內容區 ----*/
#CONTENT {
background-color: #FFFFFF;
clear: both;
}
#CONTENT h2, #CONTENT h4, #CONTENT p {
padding:6px 20px 6px 20px;
font-size:12px;
}
#CONTENT h2 {
font-family: Arial;
font-size: 24px;
text-align: center;
padding-top: 10px;
background-color:#666;
color:#FFF;
letter-spacing:10px;
border-top:2px #999 solid;
}
/*---- 頁尾 ----*/
#FOOTER {
background-color: #000000;
}
#FOOTER h2, #FOOTER p {
font-size: 12px;
padding:5px 20px;
font-family: Arial;
color: #FFFFFF;
}
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}