三栏液态布局创建代码及其示例

流行DIV+CSS布局已经很久了。2006年开始，大型门户网站纷纷改版。这种结构确实有诸多好处：
1.页面加载速度快
2.布局灵活
3.便于动态程序嵌入或者动态程序载入div+css模版
4.结构清晰，方便蜘蛛爬行，利于SEO

今天我们来单说用CSS的float和clear创建三栏液态布局的方法

三栏布局是目前比较流行的网页布局，主要页内容放在中间一栏，边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏，三栏占据整个页面的宽度，最后在页的底端放置页脚，页脚也占据整个页面宽度。

绝大多数网页设计者都熟悉传统的网页设计技术，用这些技术可以生成带有表格、创建固定宽度布局或者“液态”（它可以根据用户浏览器窗口宽度自动伸缩）布局的网页。

现在，我们都开始抛弃基于表格的布局技术，许多网络设计者正在从XHTML标记和CSS格式这一新范例中寻找创建三栏布局的方法。用绝对定位的方法从CSS中得到固定宽度的布局并不困难；但是得到液态布局就有点困难了。因此，本文介绍一种用CSS的 float和clear属性来获得三栏液态布局的方法。

基本方法

基本的布局包含五个div，即标题、页脚和三栏。标题和页脚占据整个页宽。左栏div和右栏div都是固定宽度的，并且用float属性来把它们挤压到浏览器窗口的左侧和右侧。中栏实际上占据了整个页宽，中栏的内容在左、右两栏之间“流淌”。由于中栏 div的宽度并不固定，因此它可以根据浏览器窗口的改变进行必要的伸缩。中栏div的左侧和右侧的填充（padding）属性保证内容安排在一个整齐的栏中，甚至当它伸展到边栏（左栏或者右栏）的底端也是这样。

先点击这里看示例三栏液态布局示例

欢迎转载，转载请以链接形式注明来自易点网站建设博客 http://www.ecomma.net/blog/

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
        <link rel="icon" href="/sample/images/favicon.ico"/>
     <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>三栏液态布局代码示例</title>
<style>
    body {
        margin: 0 auto;
        padding: 0;
        font: 76% Verdana, Tahoma, Arial, sans-serif;
        background: #f4f4f4 url(images/bg.gif) top center repeat-y;
    }
    div#page {
        background: #ffffff;
        color: #303030;
        margin: 0 auto;
        width: 85%;
    }
    div#content {
        position: relative;
        width: 95%;
        margin: 0 auto 20px auto;
        padding: 0;
        text-align: left;
        height:500px;
    }
     div#nav {
        position: absolute;
        top: 0;
        left: 0;
        float: left;
        width: 150px;
        display: block;
background-color:yellow;
    }
/* MAIN */
    div#main {
                border-left: 1px solid #f0f0f0;
                border-right: 1px solid #f0f0f0;
               padding: 0px 10px;
      /**/ margin: 0px 140px 5px 160px;
    background-color:#FF9933;
   display: block;

            }

        /* END MAIN */
        /* SUB */
    div#sub {
        float: right;
        width: 120px;
        margin: 0 0 20px 0;
        padding: 0;
        font-size: 0.90em;
        line-height: 1.5em;
background-color:aqua;
    }
        /* END SUB */

    /* END CONTENT */

/* END LAYOUT */
div.message {
    background: #ffffcc;
    border: 1px solid #000;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    margin: 10px auto;
    padding: 3px;
    text-align: left;
    vertical-align: bottom;
}
</style>
<meta name="heading" content="欢迎访问易点博客！"/>
    <meta name="menu" content="MainMenu"/>
</head>
<body>
<div id="page">

   <div id="content" class="clearfix">
    

    <div id="nav">
     <p> 左侧导航1</p>
     <p> 左侧导航2</p>

    </div>
    
    
      <div id="sub">

    <p> 右侧窗口1 </p>
    <p> 右侧导航2</p>
    </div>
    
    <div id="main">
    <div class="message" id="successMessages">


            您的信息已成功更新。<br />

    </div>

     <h1>
      易点博客感谢您的访问！
     </h1>

     中间页面液态，宽度自动变化。（所谓液态就是在你拖动浏览器窗口的大小的时候，中间的文字随之变化，但是左右两栏并不变化。）
     <p>
     恭喜，您登录成功！您可以选择执行以下操作：</p>
<div class="separator"></div>
<ul class="glassList">
    <li>
       联系 <a href=http://www.ecomma.net/>易点网络</a>
    </li>
    <li>
        <a href="#">致电易点网络：021-62607259-802</a>
    </li>
</ul>
    </div>
    
   </div>

</div>
</body>
</html>