经典DIV+CSS代码 经典的三行两列DIV+CSS代码布局
访问数：1805次 作者：小鲍 发表日期：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.88mylove.com页设计惯例来看页面中的内容分布，一般情www.88mylove.com况下，头部为站点导航，底部为辅助导航及版权信息等，左侧会放搜索、列表、排行等功能性内容，核心内容就集中在右侧。
搜索引擎蜘蛛爬行时，是按着页面代码顺序自上而下的，这种情况下蜘蛛很难最快的爬行到核心内容；而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回，抓取到的是与其他页面一样的功能内容时，这个页面就成为相似网页。
再加上XHTML标准设计代码精简的优势，蜘蛛爬行的效率和质量都会很高，也会更受蜘蛛欢迎的。
