SEO参考：DIV CSS三行两列经典布局

• 　　这个XHTML1标准的DIV CSS布局是著名网页设计师阿捷2004年发布在《网页设计师》上的，一个非常经典的布局，在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。

这个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区）。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有