WEB前端

DIV+CSS左右两栏布局效果(左侧固定右侧自适应宽度,大小)

位置:首页 > WEB前端 > css教程,2013-07-23
DIV+CSS左右两栏布局效果(左侧固定右侧自适应宽度,大小),其实右边按100分显示类似163邮箱的布局,很多网站后台也会用到;CSS代码如下:body,ul,li{margin:0;padding...

DIV+CSS左右两栏布局效果(左侧固定右侧自适应宽度,大小),其实右边按100分显示

类似163邮箱的布局,很多网站后台也会用到;

CSS代码如下:

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 
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息
 
内容信息</div>
</div>
</div>
</div>
<div id="jqfoot">Foot</div>

最后效果图


TAGS:DIV+CSS左侧固定右侧自适应

猜你喜欢

NewHot