大家看到好多电商网站都见过经典三列布局，它也叫做圣杯布局 ，是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. Eclipse如何构建（普通web）Maven工程

    进行以下步骤的前提是你已经安装好本地maven库和eclipse中的maven插件了(有的eclipse中已经集成了maven插件) 一.Maven项目的新建 1.鼠标右键---->New--- ...

  2. 【leetcode】991. Broken Calculator

    题目如下: On a broken calculator that has a number showing on its display, we can perform two operations ...

  3. HashMap常见面试题

    1.HashMap底层是通过什么来实现的? 在JDK1.7中是通过数组+链表来实现的: 在JDK1.8中是通过数组+链表+红黑树来实现的 2.HashMap在JDK1.8中为什么使用红黑树? 为了弥补 ...

  4. Delphi 获取系统的语言环境参数GetSystemDefaultLangID、VerLanguageName、GetLocaleInfo

    1 核心的两个API函数:GetSystemDefaultLangID 和 VerLanguageName. GetSystemDefaultLangID:获得系统默认语言的ID VerLanguag ...

  5. 阿里云异构计算团队亮相英伟达2018 GTC大会

    摘要: 首届云原生计算国际会议(KubeCon + CloudNativeCon,China,2018)在上海举办,弹性计算研究员伯瑜介绍了基于虚拟化.容器化编排技术的云计算操作系统PouchCont ...

  6. Python--面向对象的程序设计之组合应用、开发软件规范

    组合应用: class Teacher: def __init__(self,name,age,sex,salary,level): self.name=name self.age=age self. ...

  7. sql 基础语法 alter用法和视图，透视

    --查询没有被删除的学生 alter table StuInfo --修改列属性 alter column isdelete bit null alter table StuInfo --删除列 dr ...

  8. JDK换版本问题解决

    在jdk安装第一个版本的时候,就默认在path配置值中加入C:\ProgramData\Oracle\Java\javapath; 所以我们需要把Path最前面的C:\ProgramData\Orac ...

  9. python中API接口是什么

    首先还是举个例子:你要去银行取钱的例子.如果没有银行柜员给你服务,你自己去存钱,你需要做的事情有: 一,打开金库的大门 二,把钱放进去 三,记账,存放了多少钱 四,离开. 问题解决了,但是其中有不少问 ...

  10. CSS 随记

    伪类选择符的顺序:L-V-H-A CSS提供了四种元素设置链接的颜色,包括:link.:visited.:hover.:active,它们的声明是有一定顺序的,我们简称这种顺序为L-V-H-A,即li ...