- 这个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区）。
文章整理：西部数码--专业提供域名注册、虚拟主机服务
http://www.west263.com
以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!
