SEO參考：DIV+CSS三行兩列經典佈局

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

這個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」，也可以理解為「功能->功能->核心內容->功能」。

都知道，搜尋引擎蜘蛛爬行時，是按著頁面代碼順序自上而下的，這種情況下蜘蛛很難最快的爬行到核心內容；而當頁面代碼過多的時候蜘蛛完全有可能沒有爬行到核心內容就折回，抓取到的是與其他頁面一樣的功能內容時，這個頁面就成為相似網頁。

為了避免這樣的情況，包括新浪、搜狐、網易在內的很多網站（可能也包括你^_^），都在設計時將頁面中B區和C區對調。

再來看本佈局方式，頁面代碼順序是「A->C->B->D」，按內容分佈可以理解為「功能->核心內容->功能->功能」，在不改變頁面展示的情況下，將核心內容部分放到了前面。

這樣，蜘蛛爬行時就能在最短時間內索引到網頁的核心內容。

再加上XHTML標準設計代碼精簡的優勢，蜘蛛爬行的效率和品質都會很高，也會更受蜘蛛歡迎的。