【原创】SEO之绝密一招
作者令狐雨辰
mycyndi@gmail.com ,转载保留此行。
原文:
http://blog.xiaonei.com/GetEntry.do?id=267453780&owner=200196630 如果是中间三栏的排布形式,一般xhtml会这样写。
<div id='head'></head>
<div id='cont'>
<div id='left'></div>
<div id='middle></div>
<div id='right'></div>
</div>
<div id='foot'></div>
PS:我不喜欢写宽度自适应,自适应问题很多。做好用js获取浏览器宽度,然后动态写入不同宽度,这个就不在本文叙述了。
搜索引擎抓页面肯定有个顺序,如果另有一个页面是这样排布:
<div id='head'></head>
<div id='cont'>
<div id='middle></div>
<div id='left'></div>
<div id='right'></div>
</div>
<div id='foot'></div>
作为主要内容的middle排列在上面,就更有利于排名。
可是显示效果不能改变,所以想出了如下解决方案。
1、将middle的position属性设置为absolute,将其抽出文档流,然后定位。
2、将left和right通过float进行左排和右排。
3、由于position:absolute后middle不能撑开父容器,所以必须用对cont进行调整。这里使用了mootools-release-1.11.js 框架。代码如下:
var m_h = $('middle').getStyle('height').toInt();
var l_h = $('left').getStyle('height').toInt();
var r_h = $('right').getStyle('height').toInt();
var max_h = (l_h>r_h)?l_h:r_h;
max_h = (max_h>m_h)?max_h:m_h;
$('ttCont').setStyle('height',max_h+'px');
因为只有三个块,所以就用了两个条件赋值语句做了最大值。如果多,建议数组+循环。不过也不可能有多少吧。。。其中getStyle、toInt()、setStyle是mootools中的扩展。
最后注意js插入的位置:(在cont后面就行。)
<div id='head'></head>
<div id='cont'>
<div id='left'></div>
<div id='middle></div>
<div id='right'></div>
</div>
<script type="...">
var m_h = $('middle').getStyle('height').toInt();
var l_h = $('left').getStyle('height').toInt();
var r_h = $('right').getStyle('height').toInt();
var max_h = (l_h>r_h)?l_h:r_h;
max_h = (max_h>m_h)?max_h:m_h;
$('ttCont').setStyle('height',max_h+'px');
</script>
<div id='foot'></div>
最后,附上mootools下载地址:
http://mootools.net/download