大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局 ，是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虚拟机:笔记

    1.运行时数据区域 1.程序计数器 当前线程执行字节码的行号指示器,字节码解释器工作通过改变这个计数器的值来选取下一条需要执行的字节码指令,每一个线程拥有独立的程序计数器,线程私有的内存 2.虚拟机栈 ...

  2. linux文件查找工具——locate,find

    一文件查找介绍 文件的查找就是在文件系统上查找符合条件的文件. 文件查找的方式:locate, find非实时查找也就是基于数据库查找的locate,效率特别高. 实时查找:find 二locate ...

  3. linux基础（六）

    今天我们来看一下Samba服务和nginx服务. Samba服务 1.samba的功能 samba是一个网络服务器,用于Linux和Windows之间共享文件. 2.samba服务的启动.停止.重启  ...

  4. element-ui弹窗实现自定义宽度

    <el-dialog :title="title" :visible.sync="hiddenDialogCommon" :width="wid ...

  5. cms网站模板收集

    Dedecms模板 1.魔客吧  -----  dedecms .wordpress .discuz.shopnc.ecshop等模板都有 eg: html5绿色响应式企业网页模板 2.绘艺素材 -- ...

  6. [CSP-S模拟测试]:蛋糕（区间DP）

    题目传送门(内部题34) 输入格式 第一行,一个正整数$n$.第二行,$n$个正整数$a_i$,保证$a_i$互不相等. 输出格式 一行一个整数表示间宫卓司得到的蛋糕大小总和的最大值. 样例 样例输入 ...

  7. Linux的文件访问权限及修改权限命令chmod

    http://www.linuxso.com/command/chmod.html Linux的文件访问权限及修改权限命令chmod Mxx000 Mxx000 人赞同了该文章 Linux的文件访问权 ...

  8. MySQL配置(二）

    上篇文章简单的讲了一下MySQL的配置,这章我在具体讲述一下我所配置的一些内容. 一.密码策略        MySQL5.7默认安装了密码安全检查的插件.默认密码检查策略要求密码必须包含:大小写字母 ...

  9. Python常用模块系列

    1.时间模块 import time,datetime # print(time.time()) #时间戳 # print(time.strftime("%Y-%m-%d %X") ...

  10. java 并发——CountDownLatch

    java 并发--CountDownLatch 简介 public class CountDownLatch { private final Sync sync; private static fin ...