Linux ABC

LinuxABC采用了传统的布局：

由于目前content和sidebar未设背景色，沿用了body的#，显得很呆板，而且读者不容易将视线聚焦在左边的内容上，所以alfie决定将content的背景色改成白色，sidebar的颜色改成灰色系，改完之后发现两边不等高，如下图的左边所示，其实alfie的的初衷是实现右边的效果。

于是上网搜了一下，原来这个问题早已有之，众人也是八仙过海各显神通，总结了一下有以下四种解决方法。

一、分层交错法

英文原文是：Equal Height Columns with Cross-Browser CSS & No Hacks

原文的例子是三栏的，定义三个不同背景色的div：

通过控制width的百分比，将各个层错落显示，达到每个col显示不同的颜色，而且是等高的。

详细的实现方式请参阅原文。

二、border-right

alfie无意中进入http://www.alistapart.com/，看到了border-right这种解决方式，下面以LinuxABC为例简要说明。

首先将wrapper的背景色设为白色，content也设为白色，并且border-right的宽度为sidebar的宽度，sidebar的背景色设为#EDEDED

• 当content高于sidebar时，由于content的border-right的颜色即为sidebar的背景色，因此sidebar短缺的部分由content的border-right背景色不足；
• 当sidebar高于content时，由于wrapper是content和sidebar的父容器，content短缺的背景由wrapper补足；

这样就实现了两栏等高的问题，如果读者想知道三栏的实现方式，可以参考原文：Multi-Column Layouts Climb Out of the Box

index.php:

<div id="wrapper"> <div id="content">This is the content</div> <div id="sidebar">This is the sidebar</div> </div>

style.css:

#wrapper{
   background-color: #FFFFFF;
   overflow: hidden;
   width: 100%;
}
#content{
   background-color: #FFFFFF;
   width: 600px;
   border-right: 400px solid #EDEDED; 
   /* The width and color of the sidebar */
   margin-right: -400px; 
   float: left;
}
#sidebar{
   background-color: #EDEDED;
   width: 400px;
   float: right;
}

说明：知道http://www.alistapart.com/是谁创建的吗？是《网站重构》的作者Jeffrey Zeldman，alfie也是今天到书店无意中在《网站重构》这本书中发现的，这个世界好奇妙。

三、JavaScript

通过JavaScript或jquery的插件也可以实现多栏之间的等高，不过这种方式应用面不广，所以这里就不详谈了。

四、table

这是下下策，在没有css之前table的确是网页设计师的挚爱，但现已经是昔日黄花了，不提也罢。

alfie最终决定采用第二种方法，因为它够简单，效果也不错，方法一虽然很强大，但似乎过于小题大做了。

在web2.0的时代，网页设计大量采用了圆角效果，套用《大腕》里的一句台词就是“你不圆都不好意思跟别人打招呼。”，alfie也不能免俗，决定为LinuxABC的页面元素加入圆角效果。

目前实现圆角效果的主流方式有两种，一种是CSS+DIV，另一种是使用圆角图片。这两种方法对alfie来说都不方便，第一种需要掌握复杂的div嵌套，而且圆角无法做到抗锯齿；第二种则需要使用图像处理工具，而alfie最怕的就是去学习photoshop这个庞然大物，所以决定另辟蹊径。

曾经见过有人用JavaScript解决过圆角问题，而LinuxABC将大量采用jquery，所以alfie搜索了一下jquery的官方网站，还真的有好事者做了圆角效果的插件，而且还不少：

1. JQuery Curvy Corners
2. JCorners
3. JQuery Corner Gallery
4. rounded corners

对比一下上面几个插件，alfie最终决定采用rounded corners。因为另外三个插件不支持在div里直接提供参数，当多个页面元素的圆角弧度均不相同的时候需要用户在$("#ElementID").corner()中单独提供参数，这就造成展示层跟代码层的混合，不利于后期的维护。下面以一个例子展示JQuery Corner Galley和Rounded Corners两个插件的不同之处。

为LinuxABC的

1. topNavi的左上角和右上角做圆角效果；
2. wrapper的左下角和右下角做圆角效果；

JQuery Corner Galley：

<script>
   $(document).ready(function(){
      ...
      $('#topNavi').corner("round top 4px");
      $('#content').corner("round bottom 5px");
      ...
   });
</script>
<div id="topNavi">...</div>
<div id="content">...</div>

Rounded Corners：

<script>
   $(document).ready(function(){
      ...
      $('.rounded').corner();
      ...
   });
</script>
<div class="rounded {4px top}" id="topNavi">...</div>
<div class="rounded {5px bottom-left}" id="content">...</div>

rounded corners这种方式无疑更方便些，而且后期的维护相对简单。

短短几行代码就能搞定大部分的圆角效果，jquery实在是太神奇，想不爱她都不行！