网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

这个XHTML1标准的 北京网站建设DIV CSS布局是闻名网页设计师阿捷2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下（在阿捷的代码基础上作了部分修改）：

＜html＞

＜head＞

＜meta http-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;

}

#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: 2px 0px 2px 0px;

padding: 0px;

width: 574px;

background: #ccd2de;

text-align:left;

}

#left {

float: left;

margin: 2px 2px 0px 0px;

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”＞＜p＞核心内容＜/p＞＜ 网站建设/div＞

＜/div＞

＜div id=”left”＞

＜div class=”text”＞left＜/div＞

＜/div＞

＜/div＞

＜/div＞

＜div id=”footer 网站制作”＞footer＜/div 网站设计＞

＜/body＞

＜/html＞

页面样式图：

页面实现居中等XHTML技术分析请到我编辑整理的帖子，或《网页设计师》查看，效果演示及代码下载

下面从SEO角度分析这个布局的优势：

我们先按网页设计惯例来看页面中的内容分布，一般情况下，头部（A 企通互联区）为站点导航，底部（D区）为辅助导航及版权信息等，左侧（B区）会放搜索、列表、排行等功能性内容，核心内容就集中在右侧（C区）。

如上图标识所示，按传统的布局，代码编写顺序是“A->B->C->D”，也可以理解为“功能->功能->核心内容->功能”。网站设计
（阅读次数：）