div+css三栏式布局实例

< div  id ="wrap" >
         < div  id ="header" > ++DIV布局三栏式自由伸展++ </ div >
         < div  class ="innerwrap" >
             < div  id ="left" >
                 < ul >
                     < li > 左侧导航1 </ li >
                     < li > 左侧导航2 </ li >
                     < li > 左侧导航3 </ li >
                     < li > 左侧导航4 </ li >
                     < li > 左侧导航5 </ li >
                 </ ul >
             </ div >
             < div  id ="right" >
                 < span  class ="tt2" > 缺点:以百分比宽度，当浏览器以极小的窗口模式浏览时，容易引起偏差 ... IE偏差较多。 < br />
                 < br /> 不过一般出现如此浏览者若非测试者就是SB！ </ span >
             </ div >
             < div  id ="content" >
                 < span  class ="tt" >  三栏式自适应高度，总宽度可自由设定，也可百分比屏幕宽度，但左右导航菜单栏须设定固定宽度。 </ span >
                 < h1 > 以下内容均属胡扯 </ h1 >
                 < p >   This is Content!slskjdflksjdfkljsd sldfjslkdf jlskdjf lskdjflksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;l ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;ksjd flksjdflksjd flksjdflskjdfl skjdflsd flsjdfl;sj dlfjs ;ldfjksl;djkfls;djflsdjf;sdjf sl;dkfj sl;djf ldskjf;lsjd </ p >
             </ div >
             < div  class ="clear" ></ div >
         </ div >     
         < div  id ="foot" > Copyright  &copy;   < a  href ="http://www.louzi.net" > PhoenixChen </ a ></ div >
     </ div >

 

 

* {...} {margin:0;padding:0;}
body {...} {
background:#f4f4f4;
margin:10px;
color:#fff;
background:url(http://louzi.net/styles/avril/images/header.gif)
}

#wrap {...} {
    margin-left:auto;
    margin-right:auto;
                     /**//*上面这两个属性设置发现可以达到居中的效果*/
    background:#A5D854 url(http://louzi.net/tmp/0907/111.gif) repeat-y;
    /**//*background-color:Red;*/
    width:980px;
}

#header {...} {
    background:#f60 url(http://www.louzi.net/tmp/vampire2.gif) right bottom no-repeat ;
    line-height:60px;
    text-align:center;
    height:70px;
    width:100%;
    border-bottom:3px solid #000;
}

.innerwrap {...} {
background:url(http://louzi.net/tmp/0907/222.gif) right repeat-y;
text-align:left;clear:both;
}

#wrap ul {...} {
list-style-type:decimal;
}
#left {...} {
width:190px;float: left;padding:5px;

}
#right {...} {
width:190px;

float:right;padding: 5px;

}
#content {...} {
margin-left:205px;
margin-right:205px;
color:#000;
padding-top:10px;padding-bottom:10px;
}
#foot {...} {
clear:both;
height:40px;
background:#AB9311;
color:#000;
line-height:35px;
text-align:center;
border-top:3px solid #000;
font-size:11px;
font-family:tahoma;
}
.clear {...} {
font: 0px/0px sans-serif;
clear: both;
display: block;
}