师阿捷2004年发布在《网页设计师》上的,一个非常经典的布局,在IE、Mozilla和Opera浏览器中均可以实现居中和高度自适应。完整代码如下(在阿捷的代码基础上作了部分修改):

<html>
<head>
<meta http-equiv=’Content-Type’ content=”text/html; charset=gb2312″ />
<title>SEO参考:XHTML之经典三行两列布局</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>

效果演示图:

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

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

如上图标识所示,按传统的布局,代码编写顺序是“A->B->C->D”,也可以理解为“功能->功能->核心内容->功能”。

都知道,搜索引擎蜘蛛爬行时,是按着页面代码顺序自上而下的,这种情况下蜘蛛很难最快的爬行到核心内容;而当页面代码过多的时候蜘蛛完全有可能没有爬行到核心内容就折回,抓取到的是与其他页面一样的功能内容时,这个页面就成为相似网页。

为了避免这样的情况,包括新浪、搜狐、网易在内的很多网站(可能也包括你^_^),都在设计时将页面中B区和C区对调。

再来看本布局方式,页面代码顺序是“A->C->B->D”,按内容分布可以理解为“功能->核心内容->功能->功能”,在不改变页面展示的情况下,将核心内容部分放到了前面。

这样,蜘蛛爬行时就能在最短时间内索引到网页的核心内容。

再加上XHTML标准设计代码精简的优势,蜘蛛爬行的效率和质量都会很高,也会更受蜘蛛欢迎的。

此文作者:乐思蜀

http://www.cnblogs.com/skylaugh/archive/2006/12/18/596122.html

DIV+CSS三行两列经典布局相关推荐

  1. HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...

    摘要 腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...

  2. DIV+CSS一行两列布局

    实现效果: main 我是包在外面的div col1 我是第一列 col2 我是第二列 clear-float;我用来清除浮动(清除float) 以下是说明: CSS代码: .main{width:8 ...

  3. CSS布局教程:用DIV CSS实现国内经典式三行两列布局-CSS布局实例

    我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...

  4. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  5. DIV+CSS最常用的网页布局代码11例。

    转载自品略图书馆 http://www.pinlue.com/article/2019/03/2104/598296899335.html div css布局不同于table布局,它主要是按列来计算, ...

  6. 黑客内参告诉你一个:设计师用div+css 必须知道的网页布局类型

    今天我在黑客内参受到了很多的留言,很多小伙伴在表示想要建立一个属于自己的站点,让我觉得现在建站是大部分人都比较感兴趣的一个技术吧! 碰巧今天整理以前的笔记发现了一本之前遗留下来的建站笔记,现在我就手打 ...

  7. 两列自适应布局的4种思路

    前面的话 前面已经介绍过单列定宽单列自适应的两列布局,而两列自适应布局是指一列由内容撑开,另一列撑满剩余宽度的布局方式.本文将从float.table.flex和grid来介绍两列自适应布局的4种思路 ...

  8. 两列自适应布局方案整理

    前提 本文讨论的是两列自适应布局:左列定宽/不定宽,右列自适应. 虽然分这两种情况,但实际上不定宽的方案同样适用于定宽的场景,因此不定宽的方案泛用度更高. 左列定宽,右列自适应 margin + fl ...

  9. 小蚂蚁学习C语言(35)——两行三列二维数组变三行两列二维数组

    2019独角兽企业重金招聘Python工程师标准>>> 无意间看到这个问题,平时对二位数组和多维数组接触也比较少,就尝试了一下,挺简单的.O(∩_∩)O~~ # include &l ...

最新文章

  1. 2022-2028年中国侧线油行业市场研究及前瞻分析报告
  2. SQLSERVER DISTINCT的反例
  3. java查看sql视图_SQL Server查看视图定义总结
  4. webBrowser1_DocumentCompleted不停被调用
  5. boost::intrusive::function_hook用法的测试程序
  6. 和你谈谈数据分析报告
  7. 【整理】Linux常用命令
  8. 网站安装打包 软件环境检测与安装[二] 下
  9. 傻孩子的故事--写给为编程而努力的HiccDS
  10. 欢迎光临CAX软件二次开发开源社区!
  11. 6个实例详解如何把if-else代码重构成高质量代码
  12. 友盟统计java代码_SFAnalytics 分析友盟统计源码,反编译 SDK,还有部分没有 出来 android 259万源代码下载- www.pudn.com...
  13. 微信深色模式最大的槽点终于被干掉了,这一次安卓用户先享受!
  14. mysql5.6.19安装图解_mysql5.6.19安装说明
  15. 单片机c语言实习报告,单片机C语言程序设计实训100例.pdf
  16. YOLOv5训练自己的数据集(超详细完整版)
  17. 微信公众号测试号申请
  18. 10. Linux驱动 - Ubuntu驱动签名
  19. winmerge多个文件夹生成html,功能强大的文件、文件夹比对工具-WinMerge使用教程
  20. win7系统无法开启telnet服务器,Win7系统开启telnet客户端解决无法使用命令问题

热门文章

  1. android开发查漏补缺图
  2. 计算机科学与技术专接本试题,计算机科学与技术专业专接本入学考试试题.doc...
  3. 实现人脸磨皮算法---OpenCV-Python开发指南(58)
  4. 简练软考知识点整理-创建工作分解结构过程
  5. 数据库、mysql和sql的入门简明教程
  6. javascript运算符:==与===的区别,||和特殊用法
  7. 群论:同构 与 同态 (群同构 与 群同态)
  8. 雨伞16骨好还是24骨好_伞骨质量好的雨伞推荐
  9. mysql group by date_format( stat_time, '%Y/%m/%d' ) 优化
  10. Linux内核完全注释 阅读笔记:2.4、控制器和控制卡