大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局 ，是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. 数据结构---Java---HashMap---JDK1.7

    源码解读 public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Clone ...

  2. Spring MVC processing flow

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484057.html DispatcherServlet receives the request. ...

  3. BlueStore-先进的用户态文件系统《二》-BlueFS

    https://zhuanlan.zhihu.com/p/46362124 简介 上一篇文章中,介绍了BlueStore的诞生背景.逻辑架构以及设计思想,提到了在BlueStore中元数据都是存放在R ...

  4. AcWing 226. 233矩阵 （矩阵快速幂+线性递推）打卡

    题目:https://www.acwing.com/problem/content/228/ 题意:有一个二维矩阵,这里只给你第一行和第一列,要你求出f[n][m],关系式有    1,  f[0][ ...

  5. python selenium自动化测试报告

    先记录一下,后续继续更新. 首先:HTMLTestRunner的下载地址:http://tungwaiyip.info/software/HTMLTestRunner.html 选中后单击右键,在弹出 ...

  6. mac查看python安装路径

    1.terminal : input: which Python 或者 which Python3 2.terminal: input : python  --->import sys  --- ...

  7. 25. Postman的使用

    Postman下载与安装 不管是接口测试人员还是开发人员大概率下都绕不开一个工具,那就是Postman.当然可能还有一些接口测试工具,比如soapUI.Jmeter.Robot Framework 等 ...

  8. 高级UI晋升之自定义View实战（六）

    更多Android高级架构进阶视频学习请点击:https://space.bilibili.com/474380680本篇文章将从Android 自定义属性动画&Camera动画来介绍自定义V ...

  9. Python编译源文件& 代码优化

    编译源文件 代码优化 都能运行

  10. display: flex属性介绍

    参考文章: 阮大神的:Flexbox 布局的最简单表单(主要讲解项目item上的属性) 另一位大神的:布局神器display:flex(整体讲解的非常详细) 之前没有仔细看flex布局(弹性布局),设 ...