相关文章
北京网站设计不看不知道的SEO诀窍
北京网站设计英文网站建设之搜索引擎优化版
企通互联Seo 以达人的名义
北京网页设计企业网站改版和搜索引擎优化
网站建设Google 百度 搜索引擎习惯的分析
北京网页设计雅虎免费收录程序
网站制作网络营销十道“羊皮卷”
北京网站建设互联网搜索大赛赛题讲解（六）
企通互联URL优化对网站排名的影响
网页设计Google（Adwords)中国的印象：负责，教条
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> seo >> 企通互联网站建设DIV+CSS三行两列经典布局
企通互联网站建设DIV+CSS三行两列经典布局
这个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; 网页设计
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标准设计代码精简的优势，蜘蛛爬行的效率和质量都会很高，也会更受蜘蛛欢迎 网站建设
的。
上一篇：网站制作激烈竞争下SEO如何突围?干洗业SEO案例分析总结
下一篇：北京网站设计nofollow标签的使用与外部链接