左中右三栏结构SEO优化
随着大分辨率显示器的普及，三栏结构成了最流行的网页布局。打开浏览器可以发现多数网站都是典型或者变幻过的三栏结构，特别是博客，三栏基本上成了典型结构。但随着SEO的流行，大家为了更加突出主体，都想把主体栏代码放在前面，于是产成了两栏sidebar全部放在右边的布局，而这也是在博客中首先流行起来。
但不知怎的，还是比较喜欢标准的三栏，而对SEO也是钟爱有加，于是就想将两者结合起来。开始学CSS的时候，见识到了它的强大，觉得它无所不能，但真正要实现自己的想法的时候却发现并不是那么简单的。后来看到了老鬼CH第三版风格，里面很巧妙地实现了我的想法。于是昨晚就开始模仿将其运用到我现在的博客风格。改好了，下面是典型代码：
Example Source Code
<div id=”container”>
<div id=”center”>CENTER<br />COLUMN CENTER</div>
<div id=”leftRail”>LEFT RAIL</div>
<div id=”rightRail”>RIGHT RAIL</div>
</div>
Example Source Code
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:200px solid #0f0;
border-right:200px solid #f00;
}
#leftRail{
float:left;
width:200px;
margin-left:-200px;
position:relative;
}
#center{
float:left;
width:580px;
margin-right:-100%;
}
#rightRail{
float:right;
width:200px;
margin-right:-200px;
position:relative;
}
将这个运用到我的风格，发现有偏移，究其原因，出现在sidebar里面的padding：10px，在网上查了不少资料，也都是没有padding的例子，于是只能自己试验了。
接下来就是不断的改border，margin的值，试了两三个小时终于一切正常了。我知道firefox和IE在处理padding，border和总的width的时候有差异，但问题貌似不是出在这儿，因为最终没有用css hack也解决了，解决办法是把所有的border和margin都由200改为220，width不变。FF和IE7下测试正常，IE6也基本上正常。
没有评论▼