两栏布局和双飞翼布局

介绍一下一般在后台管理系统时常常会用到的布局。首先是自适应两栏布局,一侧保持一定的宽度可以作为导航,另一侧为主体内容,可以根据浏览窗口的大小而改变自身的大小。
自适应两栏布局:
HTML代码:

css样式
.left{
width: 100px;
hieght: 400px;
float: left;
background: red;}
.main {
height: 200px;
background: pink;}

接下来是双飞翼布局,也可以叫做圣杯布局;是指浏览器两侧各有一个固定宽度的盒子,而中间的主体可以根据浏览器窗口大小改变自身大小。
HTML代码:

css样式:

上面的代码是先解析左右两侧盒子后解析中间盒子。在面试时,可能出现这样的问题:如何实现页面先加载中间内容区域再加载两端区域,那此时的代码应该如下面这样。
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;}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值