經典DIV+CSS代碼 經典的三行兩列DIV+CSS代碼布局
訪問數：1314次 作者：小鮑 發表日期：2011-07-16 13:02:18<html>
<head>
<metahttp-equiv=Content-Type content=""text/html; charset=gb2312"">
<title>經典DIV+CSS代碼 經典的三行兩列DIV+CSS代碼布局 - www.0cn.cn</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: 980px;
background: #EEE;
height: 200px;
text-align: left;
}
#contain {
margin-left: auto;
margin-right: auto;
width: 776px;
}
#mainbg {
float: left;
padding: 0px;
width: 980px;
background: #60A179;
}
#right {
float:right;
margin: 0px0px 0px0px;
padding: 0px;
width: 728px;
background: #ccd2de;
text-align:left;
}
#left {
float: left;
margin: 0px 0px0px0px;
padding: 0px;
background: #F2F3F7;
width: 248px;
height: 100px;
text-align:left;
}
#footer {
clear:both;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 980px;
background: #EEE;
height: 100px;
}
.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 - www.0cn.cn</div>
</body>
</html>
下面從SEO角度分析這個DIV+CSS三行兩列代碼布局的優勢：
我們先按網www.materialhandler.net頁設計慣例來看頁面中的內容分布，一般情www.materialhandler.net況下，頭部為站點導航，底部為輔助導航及版權信息等，左側會放搜索、列表、排行等功能性內容，核心內容就集中在右側。
搜索引擎蜘蛛爬行時，是按著頁面代碼順序自上而下的，這種情況下蜘蛛很難最快的爬行到核心內容；而當頁面代碼過多的時候蜘蛛完全有可能沒有爬行到核心內容就折回，抓取到的是與其他頁面一樣的功能內容時，這個頁面就成為相似網頁。
再加上XHTML標準設計代碼精簡的優勢，蜘蛛爬行的效率和質量都會很高，也會更受蜘蛛歡迎的。
