這個XHTML1標準的DIV+CSS布局是著名網頁設計師阿捷2004年發布在《網頁設計師》上的，一個非常經典的布局，在IE、Mozilla和Opera瀏覽器中均可以實現居中和高度自適應。完整代碼如下（在阿捷的代碼基礎上作了部分修改）：
＜html＞ ＜head＞ ＜meta http-equiv=’Content-Type’ content=”text/html; charset=gb2312″ /＞ ＜title＞SEO參考:XHTML之經典三行兩列布局 - seobbs.net＜/title＞ ＜style type=”text/css”＞ body { background: #999; text-align: center; color: #333; font-family: Verdana, Arial, Helvetica, sans-serif; }
#header {
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
text-align: left;
}
#contain {
margin-left: auto;
margin-right: auto;
width: 776px;
}
#mainbg {
float: left;
padding: 0px;
width: 776px;
background: #60A179;
}
#right {
float: right;
margin: 2px 0px 2px 0px;
padding: 0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left {
float: left;
margin: 2px 2px 0px 0px;
padding: 0px;
background: #F2F3F7;
width: 200px;
text-align:left;
}
#footer {
clear: both;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 776px;
background: #EEE;
height: 60px;
}
.text {margin:0px;padding:20px;}
＜/style＞
＜/head＞
＜body＞
＜div id=”header”＞header＜/div＞
＜div id=”contain”＞
＜div id=”mainbg”＞
＜div id=”right”＞
＜div class=”text”＞＜p＞核心內容＜/p＞＜/div＞
＜/div＞
＜div id=”left”＞
＜div class=”text”＞left＜/div＞
＜/div＞
＜/div＞
＜/div＞
＜div id=”footer”＞footer＜/div＞
＜/body＞
＜/html＞
頁面樣式圖：
頁面實現居中等XHTML技術分析請到我編輯整理的帖子，或《網頁設計師》查看，效果演示及代碼下載
下面從SEO角度分析這個布局的優勢：
我們先按網頁設計慣例來看頁面中的內容分布，一般情況下，頭部（A區）為站點導航，底部（D區）為輔助導航及版權信息等，左側（B區）會放搜索、列表、排行等功能性內容，核心內容就集中在右側（C區）。
如上圖標識所示，按傳統的布局，代碼編寫順序是“A->B->C->D”，也可以理解為“功能->功能->核心內容->功能”。
都知道，搜索引擎蜘蛛爬行時，是按著頁面代碼順序自上而下的，這種情況下蜘蛛很難最快的爬行到核心內容；而當頁面代碼過多的時候蜘蛛完全有可能沒有爬行到核心內容就折回，抓取到的是與其他頁面一樣的功能內容時，這個頁面就成為相似網頁。
為了避免這樣的情況，包括新浪、搜狐、網易在內的很多
再來看本布局方式，頁面代碼順序是“A->C->B->D”，按內容分布可以理解為“功能->核心內容->功能->功能”，在不改變頁面展示的情況下，將核心內容部分放到了前面。
這樣，蜘蛛爬行時就能在最短時間內索引到網頁的核心內容。
再加上XHTML標準設計代碼精簡的優勢，蜘蛛爬行的效率和質量都會很高，也會更受蜘蛛歡迎的。
作者: 樂思蜀
原載: 點石互動搜索引擎優化博客