介绍一下一般在后台管理系统时常常会用到的布局。首先是自适应两栏布局,一侧保持一定的宽度可以作为导航,另一侧为主体内容,可以根据浏览窗口的大小而改变自身的大小。
自适应两栏布局:
HTML代码:
css样式
.left{
width: 100px;
hieght: 400px;
float: left;
background: red;}
.main {
height: 200px;
background: pink;}
接下来是双飞翼布局,也可以叫做圣杯布局;是指浏览器两侧各有一个固定宽度的盒子,而中间的主体可以根据浏览器窗口大小改变自身大小。
HTML代码:
上面的代码是先解析左右两侧盒子后解析中间盒子。在面试时,可能出现这样的问题:如何实现页面先加载中间内容区域再加载两端区域,那此时的代码应该如下面这样。
HTML代码:
CSS样式:
.center{height:500px; background:#ff0; margin:0 300px;}
.left{width:300px; height:300px; background:#f00; position:absolute; left:0; top:0;}
.right{width:300px; height:300px; background:#f0f; position:absolute; right:0; top:0;}