大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局 ，是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. SQL Wildcards 通配符

    SQL Wildcards通配符 通配符用于替换字符串中的任何其他字符. 通配符与SQL LIKE运算符一起使用.在WHERE子句中使用LIKE运算符来搜索列中的指定模式. 有两个通配符与LIKE运算 ...

  2. git代码提交步骤

    常用的步骤: 1)假如本地想关联git仓库,那么先git  init,git remote add origin [git地址] 2)假如是想直接从git仓库拉下来,那么git clone [git地 ...

  3. subsequence 1

    题目链接 题意:给你两个字符串都是数字,让你求第一个字符串的子序列中大于第二个字符串的个数. 思路:dp[i][j] 表示 str1的前i个,匹配 str2的前 j 个的种类数,那么 if(s[i] ...

  4. setTag()与getTag()的使用介绍

    转载博客:http://www.cnblogs.com/topcoderliu/archive/2011/06/07/2074419.html View中的setTag(Onbect)表示给View添 ...

  5. leetcode上的一些栈、队列问题

    20-有效的括号 思路:主要考察栈的一些基本操作,像push()(将数据压入栈顶).top()(取栈顶的数据但不删除).pop()(直接删除栈顶的元素).empty()(判断栈是否为空).这题就是先把 ...

  6. cs224d 作业 problem set2 (二) TensorFlow 实现命名实体识别

    神经网络在命名实体识别中的应用 所有的这些包括之前的两篇都可以通过tensorflow 模型的托管部署到 google cloud 上面,发布成restful接口,从而与任何的ERP,CRM系统集成. ...

  7. 力扣算法——142LinkedListCycleII

    Given a linked list, return the node where the cycle begins. If there is no cycle, return null. To r ...

  8. netty的原理

    1. Netty简介 Netty是一个高性能.异步事件驱动的NIO框架,基于JAVA NIO提供的API实现.它提供了对TCP.UDP和文件传输的支持,作为一个异步NIO框架,Netty的所有IO操作 ...

  9. python-模块-包

    一 模块 1 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编 ...

  10. [Fw]How to Add a System Call(Fedora Core 6 Kernel : 2.6.18)

    How to Add a System Call Kernel : 2.6.18編譯環境 : Fedora Core 6 假設要加的system call為 sys_project, 有一個int的輸 ...