Time: 2008-02-03 00:34

只看楼主 楼主

【原创】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
[本帖最后由 mycyndi 于 2008-02-03 02:22 编辑]
CHINAZ官方广告

IP:219.*.*.*     TOP

Time: 2008-03-02 19:15

只看该用户 沙发

Re:【原创】SEO之绝密一招

有多M捏
seawind689的签名

IP:220.*.*.*     TOP

Time: 2008-03-14 09:07

只看该用户 板凳

Re:【原创】SEO之绝密一招

学习了

IP:125.*.*.*     TOP

Time: 2008-03-14 09:08

只看该用户 地板

Re:【原创】SEO之绝密一招

另转载下

IP:125.*.*.*     TOP

Time: 2008-03-18 21:55

只看该用户 #4

Re:【原创】SEO之绝密一招

学习下
gogoto2008的签名
源码下载:www.365codes.cn(天天源码网)

IP:121.*.*.*     TOP

Time: 2008-03-20 11:12

只看该用户 #5

Re:【原创】SEO之绝密一招

路过
锈弹簧的签名

IP:118.*.*.*     TOP

Time: 2008-03-20 12:11

只看该用户 #6

Re:【原创】SEO之绝密一招

路过
fgs123的签名
http://www.cnfcsp.cn 南京在线租房网
http://www.cnspfc.cn 南京在线看房网

IP:218.*.*.*     TOP

Time: 2008-03-21 10:03

只看该用户 #7

Re:【原创】SEO之绝密一招

学习了,多谢楼主转载分享.
专做服务器的签名
重庆电信G口带宽2W/月,重庆网通G口带宽1.5W/月,联系电话13983010300,工作QQ66244638(胡先生)

重庆电信服务器托管100M共享4800元/年,10M独享5800元/年.工作QQ66244638.
































IP:125.*.*.*     TOP

Time: 2008-03-21 11:02

只看该用户 #8

Re:【原创】SEO之绝密一招

很绝狠招
d3047的签名
电信测速.网通测速100m
企业站专用主机30元热卖中。稳定空间加qq853282696.










IP:124.*.*.*     TOP

Time: 2008-03-24 11:20

只看该用户 #9

Re:【原创】SEO之绝密一招

学习了
wonyu66的签名
万优网虚拟主机大优惠---正在进行中---欢迎试用    联系QQ 632010171

.cn1元---续费50元---.com60元

IP:125.*.*.*     TOP

Time: 2008-03-24 11:29

只看该用户 #10

Re:【原创】SEO之绝密一招

谢谢楼主分享。收到。
rainieduo的签名

IP:125.*.*.*     TOP

Time: 2008-03-25 17:05

只看该用户 #11

Re:【原创】SEO之绝密一招

学习一下。。。看看
锈弹簧的签名

IP:118.*.*.*     TOP