岁月如歌

来看一个经典的三栏布局：

从内容出发（渐进增强的核心思想），一份合理的HTML结构如下：

<div id="page">
    <div id="hd"></div>
    <div id="bd">
        <div class="main"></div>
        <div class="sub"></div>
        <div class="extra"></div>
    </div>
   <div id="ft"></div>
</div>

main是主要内容，sub是辅助内容，比如导航、相关文章等，extra是额外信息，比如广告等，具体含义根据实际情况来定。书写HTML文档有个非常重要的原则是：重要的内容放前面。这能让文档更富语义，能提高可访问性，对SEO也更友善。

写好上面的代码后，我们来看看如何实现三栏布局 阅读全文 »

直接借用PPK的演示代码：

div.container { border: 1px solid #000000 }
div.left { width: 45%; float: left }
div.right { width: 45%; float: right }

浮动门Bug就这样粉墨登场了：

做了一个demo页面，各种解法办法都在里面，自己看^o^

个人推荐使用办法二：

#container { overflow: hidden; _zoom: 1 }

采用hidden是因为：如果没设定高宽，hidden和auto的效果一样的；如果设定了高宽，hidden则是大部分情况下的预期结果。_zoom: 1是为了兼容讨厌的ie6.

2008-11-06更新：经圆心指点，overflow: hidden用来布局容易出问题，一是用 JavaScript Popup 出来的层很可能显示不全（致命伤）；二是在某些情况下会造成双击空白处全选（没总结出规律，偶尔会出现）。此外，某些时候还会造成性能问题。

另外，用overflow清除浮动其实是一个hack, overflow本意不是用来干这个的，如果哪一天浏览器渲染引擎升级了，解决了这个“bug”，这个方法很可能就会失效。因此最好的清除浮动的办法还是PIE的方法：

.clearfix:after {
    content: "020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}

针对中文网站，上面有些改进：content:"020";是放一个空白字符（小虎指出“.”在中文编码的页面有时会出问题，采用空白字符借鉴自Adobe首页）。这样，visibility:hidden;也就没必要了。

百度的小志还指出，最好将font-size: 0; line-height: 0;也加上。我和小虎讨论的结果是，这两个其实是针对ie的hack, 但实际上ie不认识:after. ie下，用zoom: 1;就已经搞定了，不需要加入其它hack.

另外，IE/Mac是老古董了，不必再考虑。

百度有啊开了，作为淘宝的一名深情前端开发工程师，打开百度有啊的第一件事是F12:

很典型的24列960栅格系统的两栏布局，很明显的YUI风格。注意主体的两栏布局又分成了两部分，两部分的结构是一样的。 阅读全文 »

研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）

淘宝的首页（截图）目前尚未严格遵守栅格系统，如果重构的话，宽度方向可以考虑采用下面的栅格布局（只考虑页面主体部分，忽略高度的比例）：

（图1）

纷乱的高度世界

我们来看下图1左上角。左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格（不可避免的要调整内容，比如人气宝贝中将只能放下3张图片）。来仔细看下高度方向：

（图2）
高度方向的布局是：90 : 117 : 100, 第一个间隔是8 阅读全文 »

在25日的扯淡里，碰巧发现了autocomplete的作用。今天看见realazy兄遇到按扭状态未还原问题，通过js来重置。其实用autocomplete就可以轻松解决：

<input name="submitBtn" autocomplete="off" type="submit" value="提交" />

这样，后退或刷新页面时，Firefox就不会自动记忆表单状态了。

演示页面：firefox_autocomplete_test.php

详细资料：How to Turn Off Form Autocompletion