仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳
這個XHTML1標準的DIV+CSS佈局是著名網頁設計師阿捷2004年發佈在《網頁設計師 》上的，一個非常經典的佈局，在IE、Mozilla和Opera瀏覽器中均可以實現居中和高度自我調整。 完整代碼如下（在原代碼的基礎上作了一定規范整理）：
<html>
<head>
<metaHTTP-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;
}
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;& nbsp;
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標準設計代碼精簡的優勢，蜘蛛爬行的效率和品質都會很高，也會更受蜘蛛歡迎
的。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
