大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局 ，是Kevin Cornell在2006年提出的一个布局模型概念，这个在国内最早是由淘宝UED的工程师传播开来，在中国也有叫法是双飞翼布局，它的布局要求有以下的几点：

1、三列布局，中间宽度就自适应，目的都是左右两栏固定宽度； 
2、在执行代码时候，代码是从上往下执行的。中间栏要在浏览器中优先展示渲染。中间往往是大家最关注的点。 
3、允许任意列的高度最高；
4、要求只用一个额外的DIV标签；

参考代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>双飞翼或圣杯布局</title>

        <style>

            *{

                margin: 0;

                padding: 0;

            }

            #continate{

                font:18px/30px "微软雅黑"; /*第一个是字体大小 第二 是字体行高 第三 字体**/

            }

            /**全局定义三个div高度*/

            #conter,#left,#right{

                height: 300px;

                float: left;

            }

            #conter{

                background: sandybrown;

                width: 100%;

            }

            #left{

                background: lightblue;

                width: 30%;

                margin-left: -100%; /*往上100%就是回到最开始哪里*/

            }

            #right{

                background: cyan;

                width: 20%;

                margin-left: -20%;/*往上100%就是回到最开始哪里*/

            }

            header,footer{

                height: 100px;

                line-height: 100px;

                text-align: center;

                background: salmon;

                clear: both;/*清除浮动，要不然里面的div无法进入 因为里面没有指定height*/

            }

            #yingca{

                padding: 0 20% 0 30%;/*去掉左右的距离，把隐藏的内容显示出来**/

            }

            /*

             示例中增加一个#yingca的目的是因为当left上移时与center重叠了，

             left覆盖了center，通过yingca的padding将left占用的位置空出。

             * */

        </style>

    </head>

    <body>

        <header>one</header>

        <div id="continate">

            <div id="one">

                <div id="conter">

                    <div id="yingca">

                        conter

                    </div>

                </div>

                <div id="left">

                    left

                </div>

                <div id="right">

                    right

                </div>

            </div>

        </div>

        <footer>footer</footer>

    </body>

</html>

菜鸟一枚

css3布局篇（双飞翼）的更多相关文章

  1. CSS3布局篇（多列布局）

    我们通过学习 CSS3,能够创建多个列来对文本进行布局 ,就像报纸那样排版那样! 可以参考详细说明:http://www.w3school.com.cn/css3/css3_multiple_colu ...

  2. CSS3之圣杯布局和双飞翼布局

    圣杯布局: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

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

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

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

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

  5. 深入css布局篇(3)完结 — margin问题与格式化上下文

    深入css布局(3) - margin问题与格式化上下文      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下 ...

  6. 深入css布局篇(2) — 定位与浮动

    深入css布局(2) - 定位与浮动      在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深入学习一下css布局相关的知识 ...

  7. CSS_圣杯布局和双飞翼布局

    参考: 圣杯布局的来历是2006年发在a list part上的这篇文章: http://alistapart.com/article/holygrail 双飞翼布局介绍-始于淘宝UED: http: ...

  8. 针对移动设备的CSS3布局

    针对移动设备的CSS3布局 一些专业人士预测五年内移动设备将击败普通电脑成为网页浏览领域的霸主,不管这个预言是否应验,让网页在移动设备上较好的显示已经成为网页设计师和开发者的重要任务,本教程学习用CS ...

  9. 一步一步构建手机WebApp开发——页面布局篇

    继上一篇:一步一步构建手机WebApp开发——环境搭建篇过后,我相信很多朋友都想看看实战案例,这一次的教程是页面布局篇,先上图: 如上图所示,此篇教程便是教初学者如何快速布局这样的页面.废话少说,直接 ...

随机推荐

  1. JavaSE---多线程---线程的创建、启动

    1.概述 1.1 Java中使用Thread类表示线程:   所有的线程对象必须是Thread类 或 其子类的实例:   每条线程的作用:完成一定的任务:   Java中使用run方法来封装线程执行体 ...

  2. springboot不能用 @SpringApplicationConfiguraction 解决方案

    @SpringApplicationConfiguraction  是在springboot 1.4之前,之后改用 @RunWith(SpringJUnit4ClassRunner.class) @S ...

  3. Python基础教程（007）--Python的优缺点

    前言 了解Python的优点和缺点 知识点 优点 简单易学 免费,开源 面相对象 丰富的库 可扩展性 缺点 运行速度慢 国内市场较小 中文资料匮乏 总结: 明白Python的优点和缺点

  4. 大碗宽面Beta阶段第十一周会议记录

    本周二晚上我们在宿舍楼的大厅进行了本周的小组会议,虽然天气很冷,但大家都还是如数到场,积极参加小组会议.对于上周的任务大家都努力完成,在前端方面,大家完善了主页面和一些分页面,主要有导航栏界面的完成. ...

  5. centos系统下安装MySQL5.7.18

    1.首先安装依赖包 yum install -y gcc gcc-c++ ncurses-devel perl openssl-devel 最最重要的是,不要忘了安装openssl-devel 2.安 ...

  6. [NOIP模拟测试31]题解

    A.math 考场乱搞拿了95,2333. 考虑裴蜀定理:$ax+by=z$存在整数解,当且仅当$gcd(a,b)|z$. 那么如果某个数能够被拼出来,就必须满足所有$a_i$的$gcd$是它的因子. ...

  7. 用 Flask 来写个轻博客 (5) — (M)VC_SQLAlchemy 的 CRUD 详解

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 SQLAlchemy 的 CRUD Create 增添数据 ...

  8. 【转】开源框架是如何通过JMX来做监控的(一) - JMX简介和Standard MBean

    原文链接:https://www.cnblogs.com/trust-freedom/p/6842332.html#autoid-0-0-0 相信很多做Java开发的同学都使用过JDK自带的 jcon ...

  9. javascript实现继承的六种方式

    ​ /*实现继承的六种方式*/ /*1.扩展原型对象的方法实现继承*/ function Foo1(){} //在Foo1函数上扩展一个fn1方法,由构造函数创建的对象都具有fn1这个方法 Foo1. ...

  10. jQuery表单对象属性过滤器再探究（原创）

    上面例子的总结: 1.”+n+”千万不要把前面或者后面的+漏掉了.否则不会出现正确结果 2.$(“:checkbox”).click(countChecked)注意写法,不是click(functio ...