<!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. [JZOJ 5807] 简单的区间

    题目: 求有多少组二元组\((l,r)\)使得:\(1<=l<=r<=n,k|f(l,r)\) \(f(l,r) = \sum_{i=l}^{r}a_i - max_{i=l}^{r ...

  2. Mac 精品软件

    Snagit:Mac 平台下最优秀的屏幕截图软件,可以录制屏幕视频.截图以及对截图进行加工. Flux 4:强大易用的网页设计工具,不需要学习编程即可在一天内建成一个专业的网站 Jump Deskto ...

  3. docker实用参数

    docker images:查看docker镜像docker ls:查看运行中的docker 镜像docker run -d -p 80:80 -v /home/xxxxx/nginx-conf/ht ...

  4. Day 14: 内置函数：

    Python提供了,许多内置的函数我们按 函数的作用来分类: 一.作用域相关的内置函数(2个) (1).globals() 更改全局变量 (2).locals()更改局并命名空间的变量(上一级) 五. ...

  5. USACO06JAN The Cow Prom /// tarjan求强联通分量 oj24219

    题目大意: n个点 m条边的图 求大小大于1的强联通分量的个数 https://www.cnblogs.com/stxy-ferryman/p/7779347.html tarjan求完强联通分量并染 ...

  6. JDBC_入门及注入问题

    .JDBC基本概念: java database Connectivity java数据库连接,java语言操作数据库 本质: 官方定义的一套操作所有关系型数据库的规则,即接口. 各个数据库厂商实现这 ...

  7. java_函数式编程

    创建函数式接口: //定义了一个函数式接口 @FunctionalInterface public interface BlogTest { /* 函数式接口: 概念:有且仅有一个抽象方法的接口 接口 ...

  8. spring MVC 转发与重定向（传参）

    return "forward:index.jsp"; //转发  return "forward:user.do?method=reg5"; //转发 ret ...

  9. 微信小程序传递URL中含有特殊字符

    小程序传递URL中含有特殊字符"="时,解决办法:先encodeURIComponent,取到值以后再decodeURIComponent 首先在A页面 var urls = en ...

  10. recorder.js 基于H5录音功能

    recorder.js 基于HTML5的录音功能,输出格式为mp3文件. 前言 完全依赖H5原生API所涉及的API:WebRTC.AudioContext.Worker.Video/Audio AP ...