DIV+CSS左右布局（左固定右自適應(yīng)）類似163郵箱的布局,，很多網(wǎng)站后臺也會用到,； body,ul,li{ margin:0; padding:0;} #wrap{ width:100%; height:auto; min-height:10%; clear:both; background-color:#F9F9F9; padding-bottom:10px;} #jq-content{ height:100%; clear:both; margin-left:175px; } #jqbody-menu{ position:relative; list-style:none; width:140px; margin:10px 10px 0px -165px; float:left; background-color:#fff; padding:5px; border:1px #CCC solid;} #jqbody-content{ float:left; overflow:hidden; height:100%; width:100%;font-weight:bold; font-size:200%;background-color:#FFC} .body-wrap{ width:99%; margin:0 15px 0 0px; padding:15px 0 0px 10px;} #jqhead,#jqfoot{line-height:50px; font-size:100%; padding-left:20px; font-weight:bold; height:50px; background-color:#CCC;} .clear{ clear:both;/* 清除浮動 */} HTML代碼如下： <div id="jqhead">Head</div> <div id="wrap"> <div id="jq-content"> <ul id="jqbody-menu"> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> <li>Menu 5</li> <li>Menu 1</li> <li>Menu 2</li> <li>Menu 3</li> <li>Menu 4</li> <li>Menu 5</li> </ul> <div id="jqbody-content"> <div class="body-wrap"> Body 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息 內(nèi)容信息</div> </div> </div> </div> <div id="jqfoot">Foot</div>
|
|
|
