<!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. （转）C++实现RTMP协议发送H.264编码及AAC编码的音视频，摄像头直播

    转:http://www.cnblogs.com/haibindev/archive/2011/12/29/2305712.html C++实现RTMP协议发送H.264编码及AAC编码的音视频 RT ...

  2. Wannafly挑战赛21-A-灯塔-内含正确的凸包模版

    (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 目录 目录 题意:传送门 思路: AC代码: 题意:传送门 题目描述 Z市是一座港口城市,来来往往的船只依靠灯塔指引方向. 在海平面上 ...

  3. javascript 插件开发教程

    如何自己开发一款js或者jquery插件 引子 初学js不久,接触到js插件开发,其实很简单,不像网上吹嘘的那么复杂,又要掌握js,掌握jquery,其实没有那么复杂,下面简单介绍,供学习使用. jq ...

  4. 洛谷P1860——新魔法药水

    传送门:QAQQAQ 题意:商店里有N种药水,每种药水都有一个售价和回收价.小S攒了V元钱,还会M种魔法,可以把一些药水合成另一种药水.他一天可以使用K次魔法,问他一天最多赚多少钱? N<=60 ...

  5. access数据库调用

    1.工程环境配置(vs+qt) 点击项目,右键,选择项目设置,选择SQL 2.获取自己数据库的驱动版本有哪些,如下代码所示: QStringList drivers = QSqlDatabase::d ...

  6. jquery控件的学习

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. linux下创建oracle表空间

    来自:http://blog.sina.com.cn/s/blog_62192aed01018aep.html 1 . 登录服务器 2 . 查看磁盘空间是否够大df -h -h更具目前磁盘空间和使用情 ...

  8. 应用Dubbo框架打造仿猫眼项目 理解微服务核心思想

    1:传统应用带来的问题 单一业务开发的迭代问题              扩容困难              部署回滚困难2:微服务概述 微服务是一种将业务系统进一步拆分的架构风格          ...

  9. Ansible实现批量无密码登录

    如果机器多,假如有一百台服务器,每台服务器登录前都得先输入yes,使用交互式的方式下发公钥的话就很麻烦(ssh-copy-id). 第一次操作需要通过密码来操作服务器,所以配置文件需要把密码配置好 a ...

  10. CF850E Random Elections

    题意:一共有n个人,要在三个人中选prefer,一开始他们心中都会想好他们的排名(共6种),之后给出的判断不会矛盾.规则如下:一共有三轮,分别是a->b,b->c,c->a,每个人选 ...