<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <!--两组实现的对比:

        .俩种布局方式都是把主列放在文档流最前面，使主列优先加载。

        .两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。

        .两种布局方式的不同之处在于如何处理中间主列的位置：

                圣杯布局是利用父容器的左、右内边距+两个从列相对定位；

                双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整

        -->

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            body{

                min-width: 600px;

            }

            /*头部 脚部样式*/

            #header,#footer{

                border: 1px solid;

                background: gray;

                text-align: center;

            }

            /*三列的伪等高布局*/

            #content .middle,#content .left,#content .right{

                /*padding-bottom:10000px ;

                margin-bottom: -10000px;*/

                height: 50px;

                line-height: 50px;

                float: left;

            }

            /*双飞翼布局*/

            #content{

                overflow: hidden;

            }

            #content .middle{

                width: %;

                background: deeppink;

            }

            #content .middle .m_inner{

                padding:  200px;

            }

            #content .left,#content .right{

                background: pink;

                width: 200px;

                text-align: center;

            }

            #content .left{

                margin-left: -%;

            }

            #content .right{

                margin-left: -200px;

            }

        </style>

    </head>

    <body>

        <div id="header">

            <h4>header</h4>

        </div>

        <div id="content">

            <div class="middle">

                <div class="m_inner">

                    middle

                </div>

            </div>

            <div class="left">left</div>

            <div class="right">right</div>

        </div>

        <div id="footer">

            <h4>footer</h4>

        </div>

    </body>

</html>

<!--两组实现的对比:
1.俩种布局方式都是把主列放在文档流最前面，使主列优先加载。
2.两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
3.两种布局方式的不同之处在于如何处理中间主列的位置：
圣杯布局是利用父容器的左、右内边距+两个从列相对定位；
双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整
-->

html--双飞翼布局的更多相关文章

  1. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

  2. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  3. css双飞翼布局

     双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...

  4. CSS之圣杯布局与双飞翼布局

    圣杯布局 三行等高 HTML: <!DOCTYPE html><html><head>    <meta charset="utf-8"& ...

  5. CSS经典布局-圣杯布局、双飞翼布局

    圣杯布局的来历是2006年发在a list part上的这篇文章:In Search of the Holy Grail · An A List Apart Article圣杯是西方表达“渴求之物&q ...

  6. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  7. HTML特殊布局--------双飞翼布局

    今天看到以前写的一篇布局的例子分享给大家,双飞翼布局. 什么是双飞翼布局?? 1.三列布局,中间宽度自适应,两边固定宽度; 2.中间栏在浏览器中优先展示渲染: 双飞翼布局的原理: 中间的盒子定100% ...

  8. CSS（五）圣杯，双飞翼布局

    双飞翼布局 <style> *{ margin:; padding:; } .main{ width: 100%; height: 200px; background: pink; flo ...

  9. css居中方法与双飞翼布局

    居中 类型 方法 对应属性 水平 垂直 水平&垂直 1.父元素使用外边距自动 2.子元素显示行内块级元素,写入内容,父元素设置文本居中 3.给父元素开启非绝对和固定定位作为子元素开启绝对定位的 ...

  10. css布局-双飞翼布局

    <div class="header">Header</div> <div class="bd"> <div clas ...

随机推荐

  1. P2004 领地选择

    P2004 领地选择 题目描述 作为在虚拟世界里统帅千军万马的领袖,小Z认为天时.地利.人和三者是缺一不可的,所以,谨慎地选择首都的位置对于小T来说是非常重要的. 首都被认为是一个占地C*C的正方形. ...

  2. 8.RabbitMQ 消息传递Java对象

    通过消息服务器传递Java对象,Java类必须实现序列化接口,可以把Java对象转化为字节数组,从消费者或生产者传递到另外一个JVM中,一定需要两个JVM共享这个类,比如是UserInfo类.   1 ...

  3. hadoop2.x需要知道的默认yarn配置

    在Hadoop 2.2.0中,YARN框架有很多默认的参数值,如果你是在机器资源比较不足的情况下,需要修改这些默认值,来满足一些任务需要.NodeManager和ResourceManager都是在y ...

  4. （转）poi操作Excel， 各种具体操作和解释

    原文地址http://hi.baidu.com/j_changhong/item/981fa58d05fa755926ebd96b注原文是3.6 此文是3.9 java读取excel文件的顺序是: E ...

  5. Java学习之JVM、JRE、JDK联系与区别

    JVM,全称是Java Virtual Machine,翻译为Java虚拟机: JRE,全称是Java Runtime Environment,翻译为Java运行时环境: JDK,全称是Java De ...

  6. 9款很棒的网页绘制图表JavaScript框架脚本

    推荐9款很棒的可在网页中绘制图表的JavaScript脚本,这些有趣的JS脚本可以帮助你快速方便的绘制图表(线.面.饼.条…),其中包括jQuery.MooTools.Prototype和一些其它的J ...

  7. 转： PHP中this,self,parent的区别

    {一}PHP中this,self,parent的区别之一this篇 面向对象编程(OOP,Object OrientedProgramming)现已经成为编程人员的一项基本技能.利用OOP的思想进行P ...

  8. OC开发系列-@property和@synthesize

    property和synthesize 创建一个Person类.提供成员属性的_age和_height的setter和getter方法. #import <Foundation/Foundati ...

  9. Android开发 AndroidStudio解决Error:moudle not specified

    问题描述 在使用Android Studio 进行Builder APKs的时候,如果发现无法degub, 进行配置的时候 没有module可以进行指定 问题原因 项目未与Grade Files 文件 ...

  10. 在Spring-boot中，为@Value注解添加从数据库读取properties支持

    一般我们会把常用的属性放在工程的classpath文件夹中,以property,yaml或json的格式进行文件存储,便于Spring-boot在初始化时获取. @Value则是Spring一个非常有 ...