YY流界面之三栏液态布局&圆角边框

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

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

那么先帖篇简单的：一种实现“三栏液态布局”和“圆角边框”的方法，这是我做的效果演示：

查看全文!

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

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

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

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

这是我做的效果演示：http://www.ntrpg.org/yy/yy/demo/3c.htm

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

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

<div id="main">

 <!-- 左侧栏 -->
 <div id="leftColumn"></div>

 <!-- 右侧栏 -->
 <div id="rightColumn"></div>

 <!-- 中间的正文 -->
 <div id="centerColumn"></div>

</div>

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

#main{ 
 background:#464646; 
 width:100%; 
 margin:0px auto;       
 padding:0; 
 text-align:left;       
 float:left;

} 

#leftColumn{ 
 float:left; 
 width:200px;

}

#rightColumn{ 
 float:right; 
 width:200px; 

}

#centerColumn{ 
 width:auto; 
 margin:0px 200px 0px 200px; 

}

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

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

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

#leftColumn{
 margin-left:0px;
}

#rightColumn{

 margin-right:0px;
}

#centerColumn{
 zoom:1;

}

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

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

<!--[if IE]>

<link href="css/forie.css" type="text/css" rel="stylesheet" />

<![endif]-->

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

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

<div class="widgetBox"> 

 <div class="widgetTop">

  <div class="widgetLeftTop"></div><div class="widgetRightTop"></div>

 </div> 

 <div class="widgetCenter"> 
  <div class="widgetMain" >    
  </div> 
 </div> 

 <div class="widgetBottom">

  <div class="widgetLeftBottom"></div><div class="widgetRightBottom"></div>

 </div>

</div>

样式：

.widgetBox{
 margin:0px;
 padding:0px;

}
.widgetTop{
 background:url(../images/boxtbg.jpg) repeat-x;

 height:21px;
}
.widgetLeftTop{
 background:url(../images/boxlt.jpg) no-repeat;

 height:21px;width:16px;
 float:left;

}
.widgetRightTop{
 background:url(../images/boxrt.jpg) no-repeat;

 height:21px;width:16px;
 float:right;

}
.widgetBottom{
 background:url(../images/boxbbg.jpg) repeat-x;

 height:20px;
}

.widgetLeftBottom{
 background:url(../images/boxlb.jpg) no-repeat left;

 height:20px;width:16px;
 float:left;

}
.widgetRightBottom{
 background:url(../images/boxrb.jpg) no-repeat right;

 height:20px;width:16px;
 float:right;

}
.widgetCenter{
 background:#343434;
 margin:0 3px 0 3px;

}
.widgetMain{
 width:auto;
 margin:0 3px 0 3px;

 background:#fff;
 border-left:2px solid #CCCCCC;
 border-right:2px solid #CCCCCC;

 padding:8px;
}

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

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

.widgetCenter{
 min-height:130px;
}

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

*html .widgetCenter{
 height:130px;
}

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

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