<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 © <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;}