您的位置：首页 > Web前端 > CSS

DIV+CSS三行两列经典布局

2012-02-26 19:19 330 查看

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



<html>

<head>

<metahttp-equiv=‘Content-Type‘ c>

<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标准设计代码精简的优势，蜘蛛爬行的效率和质量都会很高，也会更受蜘蛛欢迎

的。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div css xhtml mozilla float class

相关文章推荐

新的分享

章节导航