這個XHTML1標準的DIV+CSS佈局是著名網頁設計師阿捷2004年發佈在《網頁設計師 》上的，一個非常經典的佈局，在IE、Mozilla和Opera瀏覽器中均可以實現居中和高度自適應。完整代碼如下（在原代碼的基礎上作了一定規範整理）：
<html>
<head>
<metahttp-equiv=‘Content-Type‘ c>
<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;
}
a:link,visited {color:#004592;text-decoration:none;}
a:hover {color:#004592;text-decoration:underline;}
a:active {color:#004592;text-decoration:none;}
img {border:0px;}
#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: 2px0px 2px0px;
padding: 0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left {
float: left;
margin: 2px 2px0px0px;
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">text<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
頁面樣式圖見下頁圖示
![]()
頁面實現居中等XHTML技術分析請到我編輯整理的帖子 ，或《網頁設計師 》查看，效果演示及
代碼：http://www.seobbs.net/xhtml32.html
下面從SEO角度分析這個佈局的優勢：
我們先按網頁設計慣例來看頁面中的內容分佈，一般情況下，頭部（A區）爲站點導航，底部
（D區）爲輔助導航及版權信息等，左側（B區）會放搜索、列表、排行等功能性內容，核心內容
就集中在右側（C區）。
如上圖標識所示，按傳統的佈局，代碼編寫順序是“A->B->C->D”，也可以理解爲“功能->功能
->核心內容->功能”。
都知道，搜索引擎蜘蛛爬行時，是按着頁面代碼順序自上而下的，這種情況下蜘蛛很難最快
的爬行到核心內容；而當頁面代碼過多的時候蜘蛛完全有可能沒有爬行到核心內容就折回，抓取
到的是與其他頁面一樣的功能內容時，這個頁面就成爲相似網頁。
爲了避免這樣的情況，包括新浪 、搜狐 、網易 在內的很多網站（可能也包括你^_^），都
在設計時將頁面中B區和C區對調。
再來看本佈局方式，頁面代碼順序是“A->C->B->D”，按內容分佈可以理解爲“功能->核心內容
->功能->功能”，在不改變頁面展示的情況下，將核心內容部分放到了前面。
這樣，蜘蛛爬行時就能在最短時間內索引到網頁的核心內容。
再加上XHTML標準設計代碼精簡的優勢，蜘蛛爬行的效率和質量都會很高，也會更受蜘蛛歡迎
的。
<html>
<head>
<metahttp-equiv=‘Content-Type‘ c>
<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;
}
a:link,visited {color:#004592;text-decoration:none;}
a:hover {color:#004592;text-decoration:underline;}
a:active {color:#004592;text-decoration:none;}
img {border:0px;}
#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: 2px0px 2px0px;
padding: 0px;
width: 574px;
background: #ccd2de;
text-align:left;
}
#left {
float: left;
margin: 2px 2px0px0px;
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">text<p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p></div>
</div>
<div id="left">
<div class="text">left</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
頁面樣式圖見下頁圖示
頁面實現居中等XHTML技術分析請到我編輯整理的帖子 ，或《網頁設計師 》查看，效果演示及
代碼：http://www.seobbs.net/xhtml32.html
下面從SEO角度分析這個佈局的優勢：
我們先按網頁設計慣例來看頁面中的內容分佈，一般情況下，頭部（A區）爲站點導航，底部
（D區）爲輔助導航及版權信息等，左側（B區）會放搜索、列表、排行等功能性內容，核心內容
就集中在右側（C區）。
如上圖標識所示，按傳統的佈局，代碼編寫順序是“A->B->C->D”，也可以理解爲“功能->功能
->核心內容->功能”。
都知道，搜索引擎蜘蛛爬行時，是按着頁面代碼順序自上而下的，這種情況下蜘蛛很難最快
的爬行到核心內容；而當頁面代碼過多的時候蜘蛛完全有可能沒有爬行到核心內容就折回，抓取
到的是與其他頁面一樣的功能內容時，這個頁面就成爲相似網頁。
爲了避免這樣的情況，包括新浪 、搜狐 、網易 在內的很多網站（可能也包括你^_^），都
在設計時將頁面中B區和C區對調。
再來看本佈局方式，頁面代碼順序是“A->C->B->D”，按內容分佈可以理解爲“功能->核心內容
->功能->功能”，在不改變頁面展示的情況下，將核心內容部分放到了前面。
這樣，蜘蛛爬行時就能在最短時間內索引到網頁的核心內容。
再加上XHTML標準設計代碼精簡的優勢，蜘蛛爬行的效率和質量都會很高，也會更受蜘蛛歡迎
的。
