简单实现三栏布局之圣杯双飞翼
来源:互联网 发布:java html转xhtml 编辑:程序博客网 时间:2024/06/02 15:13
本任务主要是利用css完成三栏式布局。关于三栏式布局,常规情况下,可以使用float实现,也可以使用relative来实现。 但是,如果要求左右两层定宽,中间层的宽度随浏览器窗口宽度变化而变化,这种情况下,就适合使用圣杯和双飞翼布局。通过对圣杯及双飞翼布局学习之后,我认为两种布局的主旨是在html结构中,使中间的主体层位于左右两层的前面。任务效果图:
基本思路及区别:
1.两种布局的基本构思为:首先让中间层100%宽度占满同一高度的空间,在左右两层被挤出中间层所在区域时, 使用margin-left的负值将左右两个层拉回与中间层同一高度的空间,接下来调整左右两层到指定位置, 最后使用中间层的margin或padding属性使中间层的内容躲出左右两层占住的显示区。
2.两种布局的主要区别在于:圣杯布局采用一个父层包含中间、左右三个子层,设置父层的padding值腾出左右两层的显示区, 并对左右两层使用relative和left、right值调整位置;双飞翼采用中间、左右三层并列,再在中间层里设置一个子层, 设置中间层子层的margin值腾出左右两层的显示区,对左右两层使用margin值即可调整位置;
圣杯html结构:
<div id="container"> <div id="main"></div> <div id="left"></div> <div id="right"></div></div>
圣杯css基本代码:
#container{ padding: 0px 120px 0 140px;/*腾出宽度*/ }#main{ width: 100%; position: relative; }#left{ width: 140px; margin-left: -100%;/*将left层拉回main层所在高度区域*/ left: -140px;/*调整位置*/ position: relative; }#right{ width: 120px; margin-left: -120px;/*将right层拉回main层所在高度区域*/ right: -120px;/*调整位置*/ position: relative; }
双飞翼html结构:
<div id="main"> <div id="main-inner"></div></div><div id="left"></div><div id="right"></div>
双飞翼css基本代码:
#main{ width: 100%; position: relative; }#main-inner{ margin:0 120px 0 140px; }#left{ width: 140px; margin-left: -100%;/*将left层拉回main层所在高度区域*/ }#right{ width: 120px; margin-left: -120px;/*将right层拉回main层所在高度区域*/ }
以上,从理论上来讲,双飞翼布局可以比圣杯布局少设置4个属性:left、right层的position属性和"left"、"right"属性。 但在实际使用时并非如此,比如本任务中,需要将网页设计成上面效果图的样式,可以看到left、main、right层之间都有间隙, 在使用双飞翼布局的时候,可以使用margin-left来调整层的位置,但此时对于left层来说,其margin-left值为-100%, 而间隙为定宽,不能使用百分比定位,此时,仍然要使用position(relative)和"left"属性来调整定位。 right层的margin-left值使用的就是像素值,此时可以直接用margin-right调整位置。
- 简单实现三栏布局之圣杯双飞翼
- css 三栏布局 圣杯布局 双飞翼 flex
- CSS经典布局之圣杯布局、双飞翼布局
- CSS布局之圣杯布局和双飞翼布局
- 经典布局之圣杯布局&双飞翼布局
- 三栏布局(圣杯布局和双飞翼布局)
- 圣杯布局与双飞翼布局的实现思路
- 圣杯布局与双飞翼布局的实现思路
- 圣杯布局与双飞翼布局的实现&区别
- 圣杯布局和双飞翼布局的实现过程
- 圣杯布局【双飞翼布局】的几种实现
- 三栏布局:浮动布局、绝对布局、(相对)圣杯布局、双飞翼布局、中间固定两边自适应总结
- CSS之圣杯布局和双飞翼布局
- 双飞翼布局(圣杯布局)
- 圣杯布局、双飞翼布局
- 什么是圣杯布局、双飞翼布局?
- 圣杯布局和双飞翼布局
- 圣杯布局&&双飞翼布局
- Ogre合成器框架学习
- python iterable与iterator,generator,generator expression
- 编译最新版本gutenprint
- Spring学习(一)
- 问题 1431: 分糖果
- 简单实现三栏布局之圣杯双飞翼
- PyQt5的使用
- ARP脚本及ARP协议
- 动态数组与静态数组区别
- linux下配置python环境 django配置项目
- Android中UI组件AlertDialog的各种实现
- Springtest与junit结合测试注解失败原因
- 测试需求分析指南
- python ---mysql基本操作