生病的吉娃娃

所谓的液体三栏布局，就是左右两栏固定宽度，中间一栏的宽度随着浏览器窗口的大小自由变化。

三栏液体布局能最大限度地利用空间。比如我的BLOG：http://www.wubuku.com用的就是三栏液体布局。

比如，有了液体三栏布局，就可以向google申请一幢摩天广告大楼放在边栏上，整个版面也不会显得局促。呵呵，浪费资源就是犯罪啊。

怎么将z-blog缺省的两栏布局修改成液体三栏布局呢？其实很简单的，修改一下Template目录中的模板文件，包上几个div标签就可以了。

怎么修改？我们先看看z-blog缺省的两栏布局的模板文件是什么样子的，以Template目录下的default.html为例，找到下面几个div标签：

<div id="divNavBar">
    <h3><#ZC_MSG052#></h3>
    <ul>
    <#CACHE_INCLUDE_NAVBAR#>
    </ul>
</div>

<div id="divMain">
    <#template:article-multi#>
    <div class="post pagebar"><#ZC_MSG042#>:<#template:pagebar#></div>
</div>

<div id="divSidebar">
    <!-- 省略边栏的内容 -->
</div>

我们将他们改为这个样子：

<div id="divNavBar">
    <h3><#ZC_MSG052#></h3>
    <ul>
    <#CACHE_INCLUDE_NAVBAR#>
    </ul>
</div>

<!-- 新增加的div容器 -->
<div id="divMainContainer">

    <div id="divMain">

        <!-- 新增加的div容器 -->
        <div id="divMainInMainContainer">

            <!-- 新增加的div，包裹着原来divMain中的帖子内容 -->
            <div id="divMainInMain">

                <#template:article-multi#>
                <div class="post pagebar"><#ZC_MSG042#>:<#template:pagebar#></div>

            </div>

        </div>

        <!-- 新增的边栏 -->
        <div id="divSidebar2">

            <!-- 比如，我们可以把原来边栏中的“网站目录”移到这个新增加的边栏中 -->
            <div class="function" id="divCatalog">
            <h3><#ZC_MSG026#></h3>
            <ul>
            <#CACHE_INCLUDE_CATALOG#>
            </ul>
            </div>

            <!-- 比如，我们可以把原来边栏中的“站点统计”移到这个新增加的边栏中 -->
            <div class="function" id="divStatistics">
            <h3><#ZC_MSG029#></h3>
            <ul>
            <#CACHE_INCLUDE_STATISTICS#>
            <#CACHE_INCLUDE_WHOLE_STATISTICS#>
            </ul>
            </div>

            <!-- 比如，我们可以在这个边栏中加上google搜索 -->
            <div class="function" id="divGoogleSiteSearch">

<!-- SiteSearch Google -->
<form method="get" action="http://www.google.com/custom" target="google_window">
<table border="0" bgcolor="#ffffff">
<tr><td nowrap="nowrap" valign="top" align="left" height="32">
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" border="0" alt="Google" align="middle"></img></a>
<br/>
<input type="hidden" name="domains" value="www.oucsoft.com"></input>
<label for="sbi" style="display: none">输入您的搜索字词</label>
<input type="text" name="q" size="25" maxlength="255" value="" id="sbi"></input>
</td></tr>
<tr>
<td nowrap="nowrap">
<table>
<tr>
<td>
<input type="radio" name="sitesearch" value="" checked id="ss0"></input>
<label for="ss0" title="搜索网络"><font size="-1" color="#000000">Web</font></label></td>
<td>
<input type="radio" name="sitesearch" value="www.oucsoft.com" id="ss1"></input>
<label for="ss1" title="搜索 www.oucsoft.com"><font size="-1" color="#000000">www.oucsoft.com</font></label></td>
</tr>
</table>
<label for="sbb" style="display: none">提交搜索表单</label>
<input type="submit" name="sa" value="搜索" id="sbb"></input>
<input type="hidden" name="client" value="pub-2632660065646967"></input>
<input type="hidden" name="forid" value="1"></input>
<input type="hidden" name="ie" value="GB2312"></input>
<input type="hidden" name="oe" value="GB2312"></input>
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
<input type="hidden" name="hl" value="zh-CN"></input>
</td></tr></table>
</form>
<!-- SiteSearch Google -->

            </div>

            <!-- 比如，我们可以在这个边栏中盖上一幢google Adsense广告摩天大楼 -->
            <div class="function" id="divGoogleAdSense">

<script type="text/javascript"><!--
google_ad_client = "pub-2632660065646967";
google_ad_width = 160;
google_ad_height = 600;
google_ad_format = "160x600_as";
google_ad_type = "text_image";
//2006-12-18: www.oucsoft.com
google_ad_channel = "7202280454";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0000FF";
google_color_text = "000000";
google_color_url = "008000";
//--></script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

            </div>  
        
        </div>

    </div>

</div>

<div id="divSidebar">
    <!-- 省略原来的边栏的内容 -->
</div>

修改完default.html模板，我们依次修改catalog.html、single.html等文件。

最后，让我改CSS风格文件吧。比如，我的BLOG的CSS是这样的（不完整代码，只列出关键部分）：

/*---------------------------------------------------------------*/
#divAll{
  width:99%;
  margin:0 auto;
  padding:0
}

#divPage{
  width:100%;
  margin:0;
  padding:0 0 0 0;
  text-align:left;
}
/*
#divMiddle{
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:left;
  float:left;
}
*/
#divTop{
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:left;
  float:left;
  height:100px;
}

#divSidebar{
  width:200px;
  margin:0;
  padding:0;
  text-align:center;
  float:left;
  border-right:1px solid #CACACA;
}
/*
#divInnerSidebar {  
}
*/

#divMainContainer{
  float:right;
  margin:0px 0px 0px -205px;
  width:100%;
}
#divMain{
  margin:0px 0px 0px 205px;
  padding: 0;
  /*text-align:left;*/
}

#divBottom{
  width:100%;
  margin:0 auto;
  padding:0;
  text-align:center;
  float:left;
  height:70px;
  border-top:2px solid #8488D2;
}

#divMainInMainContainer{
  float:left;
  width:100%;
  margin-right:-235px;
  text-align:left;
}
#divMainInMain{
  margin-right:235px;
  text-align:left;
}
#divSidebar2
{
  float:right;
  width:230px;
  margin:0 0 0 0;
  padding:0 0 10px 0;
  text-align:center;
  border-left:1px solid #CACACA;
}

好了，更改Blog设置，使用新的风格样式，然后重建文件，整个网站就变成三栏目液体风格了。

我修改的用于三栏液体布局的两套样式，供大家下载：

改自z-blog缺省两栏风格的样式：点击下载该文件

——示例网站：http://www.oucsoft.com，http://www.66ph.com

改自simple两栏风格的样式：点击下载该文件

——示例网站，我的BLOG：http://www.wubuku.com

至于怎么修改Template，大家还是依据自己的口味，自己动手吧。