这样的复印件真的太多了，看多了千篇一律，觉得没有新鲜感。 我今天说点新鲜的话。 关于seo优化中html排版的精彩把戏，笔者诞生了程序员。 所以，写的东西有点技术性。 请多关照。

很多网站的主页都有热点图模块，以幻灯片形式切换(参见下图)。

这个模块占国内网站的70%，也使用了包括笔者在内的网站，但这个效果的代码往往是html文档结构的前一部分，最常见的是导航栏下，实现方法是flash和

<； div class=banner>；
<； object>；
flash版本
<。 /object>；
<； /div>；
<； div class=banner>；
<； script type=text/javascript>；
javascript版本
<。 /script>；
<； /div>；

如果在html的前一部分插入上面的代码，不仅是seo的优化，对普通客户来说也是令人忧郁的。 seo的缺点是站长的朋友们知道一个html文档的前面部分是每个大搜索引擎的重要地方。 如果用js和flash实现的话，这些代码是各大搜索引擎无法识别的。 对普通客户来说不好的是，这个效果通常是在4~5张图像之间切换。 这些图像加起来最少200kb左右。 即使通过js或flash实现，如果嵌入到html文档中，客户也必须等待这些图像的加载完成。 特别是图像大的情况下，可能会卡在头上，浏览器假死。

在此期间，笔者总结了一点处理方案，通过长期注意，实践说明这些方案是ok的，排名也没有影响，收录正常，在这里大胆分享。

一、结构顺序的调整

根据迄今为止的排版布局经验，我们的代码应该是这样的。

html代码:

<； body>；
<； div class=container>；
<； div class=header>； 头部文件<； /div>；
<； div class=banner>； 滑动效果模块<； /div>；
<； div class =内容& gt； 正文复制<； /div>；
<； div class =版权和gt； 版权部分<； /div>；
<； /div>；
<； /body>；

css代码:

body {margin:0； padding:0； 文本对齐:中心；
.container { width:980 PX； margin:0 auto； 位置:关系； background:silver；
.header { height:200 PX； line-height:200px； background:red；
.banner { height:150 PX； line-height:150px； background:yellow；
.content { height:400 PX； line-height:400px； background:blue；
.copyright { height:50px； line-height:50px； background:green； ο

笔者改进的代码如下。

html代码:

<； body>；
<； div class=container>；
<； div class=header>； 头部文件<； /div>；
<； div class =内容& gt； 正文复制<； /div>；
<； div class =版权和gt； 版权部分<； /div>；
<； div class=banner>； 滑动效果模块<； /div>；
<； /div>；
<； /body>；

css代码:

body {margin:0； padding:0； 文本对齐:中心；
.container { width:980 PX； margin:0 auto； 位置:关系； background:silver；
.header { height:200 PX； line-height:200px； background:red；
.banner { position:absolute； top:200px； width:980px； height:150px； line-height:150px； background:yellow；
.content { margin-top:150 PX； height:400px； line-height:400px； background:blue；
.copyright { height:50px； line-height:50px； background:green； ο

通过以上代码的分解，其实我使用了css中的position浮动布局这一绝妙的把戏。 关于position浮动布局的知识可以找到相关资料。 一定要掌握这个知识点，有助于seo的优化。

二、巧用延迟加载

html代码:

<； body>；
<； div class=container>；
<； div class=header>； 头部文件<； /div>；
<； div class =内容& gt； 正文复制<； /div>；
<； div class =版权和gt； 版权部分<； /div>；
<； div class=banner>； <； /div>；
<； /div>；
<； /body>；

jquery代码:

$ ( document ).ready ( function ( ) {/br/} window.settimeout ( function ( ) {。 object>； 这里是插入flash代码的地方<； /object>； 中选择照明设备

ajax版本[/BR/] $.GET ( Flag wind/GET Banner，Function ( DATA )32
}，3000 )；
} )；

这个jquery代码的大致意思是，在文档加载完成3秒后执行ajax请求，或者控制banner这个div的副本。

上面两个方案的代码只是扔点球的例子，可以在其他地方使用它，将与seo无关的副本加载到后面一点，用js延迟加载显示。 这对每个搜索引擎都没有太大的障碍，对普通客户来说也是好事。