CSS中经典的双飞翼布局(
来源:互联网 发布:mac下git客户端 编辑:程序博客网 时间:2024/05/16 19:37
笔者在一些博客和论坛中经常看到经典的双飞翼布局,淘宝的首页也运用了这种兼容性很好的双飞翼布局
1.何谓双飞翼布局?
简单来说,双飞翼布局是将一个网页分为左列,中列和右列三部分,并且我们要得到的效果是:
左列和右列宽度恒定,中间列的宽度根据浏览器窗口的大小自适应。
2.如何实现双飞翼布局?
(1)首先我们要得到如下的布局样式:
<div class="container"> <div class="column" id="center_panel"></div> <div class="column" id="right_panel"></div> <div class="column" id="left_panel"></div> </div>
可以看到我们在外层用一个类名为:container的大的div包裹。而内层分为了我们所说的三列
但是注意,在整个dom结构中,主列位于最前面
(2)让列开始浮动
我们让列全部浮动起来
.column{
float:left
}
并设置
.container{
width:100%;
}
.center_panel{
width:100%;
}
于是在这种情况下,center_panel已经占据了整个container父元素的全部宽度,并且这个宽度是自适应的
(3)如何实现左右列固定宽度
在实现左右列固定宽度时,我们这里采用了margin负值
首先,得到左列固定宽度,我们会有:
#right_panel{
width:300px;margin-left:-100%; }这里我们假设,固定宽度的左列宽度为300px,当margin-left:-100%之时,这个左边列会脱离自己所在行,向上一行浮动,效果为:此时我们实现了左列固定宽度,中间列自适应再次,我们根据同样原理,定义右列的浮动偏移(margin负值)#left_panel{width:300px;margin-left:-300px;}这样,我们就实现了我们所需要的双飞翼布局,也就是中间列宽度自适应,左列和右列的宽度固定我们所得到的效果为:3.双飞翼布局的优点(1)兼容性好,兼容若有主流浏览器,包括万恶的IE6(2)因为在DOM中center_panel在三列结构的最前面,因此可以实现主要内容的优先加载
0 0
- CSS中经典的双飞翼布局(
- CSS经典布局之双飞翼布局
- CSS经典布局之双飞翼布局
- CSS经典布局之圣杯布局、双飞翼布局
- css双飞翼布局
- css双飞翼布局
- CSS双飞翼布局实例
- CSS之 双飞翼布局
- CSS经典布局-圣杯布局和双飞翼布局对比
- CSS布局之--淘宝双飞翼布局
- CSS 圣杯布局 双飞翼布局
- css学习成果-双飞翼布局
- CSS基础1-双飞翼布局
- 双飞翼布局的原理
- 经典布局之圣杯布局&双飞翼布局
- CSS中的圣杯布局,以及圣杯布局与双飞翼布局的区别
- 关于双飞翼布局中浮动与负边距的理解
- CSS布局 -- 圣杯布局 & 双飞翼布局
- iOS开发技巧(使用Xcode DEBUG模式和RELEASE模式)
- UVA 1335 Beijing Guards
- JavaScript -- 音频视频的播放
- 经验:人工智能威力初显,想养一只阿尔法狗帮我画图
- HTML5之音频与视频
- CSS中经典的双飞翼布局(
- java 请求响应soap(webService)
- PHP 中的文件处理技术
- Java设计模式学习心得
- 函数定义中为什么可返回函数内部定义的函数?
- 第7章:pointers,arrays and references
- Mysql大数据量存储及访问的设计讨论
- Linux互斥锁、条件变量和信号量
- 【Socket编程】篇一