在公司做了好几个项目的WEB前端开发工作，其实很早就想写一些技术心得，类似以前发的《[造车轮计划]今天写了一个右键菜单的JS类》，可惜……好罢这句话我已经重复过无数次了：太累 & 没时间。

今天终于整理了一部分以前写过的代码，我准备以后陆续在BLOG上发一些WEB交互界面方面的文章，并且逐步补充完善，争取凑出一套原创的控件库和JS效果库。如果你觉得这些东西对自己的开发有帮助，我当然非常欢迎你拿去自由使用，不过我也希望能收到反馈信息——比如你在开发中遇到的问题、或是你在这些代码基础上做的修改和补充——嗯，这也算是一种开源协议，比什么BSD什么阿帕契都要厚道罢……XD

那么先帖篇简单的：一种实现“三栏液态布局”和“圆角边框”的方法，所谓“液态布局”，就是网页内容的宽度能随屏幕分辨率/浏览器的大小而改变，自动撑满。

根据我的经验……目前网页设计中最常见的还是采用固定宽度居中对齐的布局，也就是说当用户的分辨率提高时，页面左右会出现空白，强调用户体验的WEB2.0网站们翰注重个性的BLOG们，经常会针对这些空白专门设计BODY背景和边缘。而采用液态布局的网页中，又有很大一部分是采用两栏式结构。这里我要做的，是同时包括正文、左侧栏和右侧栏，始终撑满整个窗口，中栏的宽度会随浏览器窗口的大小而变化，当然了，在IE和Firefox里不能有差别。

这是我做的效果演示：http://demo.limboy.com/3c.htm

注意：在这个页面里，圆角方块的底部已经做成可以上下拖动的了，类似软件窗口的拖动效果，方便大家测试高度的自适应效果。

首先是HTML，建立三个容器，放在一个层里面，作为左、中、右三个竖栏：

注意：中栏的DIV必须写在左右侧栏的“下面”，否则CSS就达不到效果：

左右侧栏分别采用了左浮动和右浮动，限定宽度。中栏采用居中对齐的样式，只是不限定宽度，而且左右的margin设置为侧栏的宽度，而不是auto。

需要注意的是，为了让容器高度随着内容而增加，三栏外面的容器#main也必须设置为浮动，如果它的下面还有容器，也要设置为浮动，比如演示页面中的#foot，而#main上面的容器则不需要浮动，比如演示页面中的#head和#top。

但只是这样还不够，如果在容器里面加入内容，就会发现在该死的IE里出现了一些瑕疵，IE6和IE7一样，凭这一点就可以猜测是属于layout属性BUG，经过一些测试可以证实。所以解决办法是，给#centerColumn层加入某种能触发layout属性的样式，这里我采用的是IE的专有样式zoom：

以上代码应该放在一个IE专用的样式表里，这样既不会影响其他浏览器，也能通过W3C校验 :D

用微软的专有技术“条件注释”来实现：

注释内的代码只有符合条件判断的IE浏览器会解释。

接下来在三栏中都加入若干圆角方框，作为基本容器。我的圆角方框是这样的：

样式：

为了适应各种大小，顶部边缘和底部边缘用了单独的圆角图片和横向重复的背景，而中间没有任何图片，用边框颜色和内外两个层之间的空隙颜色来做出边缘阴影的效果。

当页面里内容不足的时候，这些圆角方框都会显得不够长，可以在样式里加入最小高度来解决这个问题：

min-height属于CSS2标准，IE6并不支持，但可以利用IE6的一个最常见的overflow BUG：当容器内的东西大小超过容器时，按照W3C标准，超出的内容会“飘”出来显示在容器外面，而在IE6里容器会被撑大，所以只要直接在IE专用样式表里写.widgetCenter{height:130px;}就行了……然则，IE7修正了overflow BUG，而且支持min-height属性-_______-b…………所以，必须写成这样：

*html是某种只有IE6认识的东西……而IE7不认识……因此以上样式只对IE6及以下的浏览器生效……(随便说一下，也有一种只有IE7能识别的前缀：*+html )-_______-b

这样就做出了一个比较灵活的三栏布局，只改动少量代码和背景图片就可以适应不同的页面设计（代码重用性在网页中同样重要）。更详细的内容请自行查看演示页面的代码。