<style>

        body,html {

            height:%;

            padding: ;

            margin:

        }

        .main {

            background: #f2f2f2;

            width: %;

            float: left;

            height: %;

        }

        .left {

            background: gray;

            width: 100px;

            float: left;

            margin-left: -%;

            height: %;

            overflow: hidden;

        }

        .right {

            background: #fff;

            width: 100px;

            float: left;

            margin-left: -100px;

            height: %;

            overflow: hidden;

        }

        .inner {

            margin-left: 100px;

            margin-right: 100px;

        }

    </style>

  </head>

  <body>

          <div class="main">

            <div class="inner">

                Main

            </div>

        </div>

        <div class="left">Left</div>

        <div class="right">Right</div>

  </body>
/**

 *                    _ooOoo_

 *                   o8888888o

 *                   88" . "88

 *                   (| -_- |)

 *                    O\ = /O

 *                ____/`---'\____

 *              .   ' \\| |// `.

 *               / \\||| : |||// \

 *             / _||||| -:- |||||- \

 *               | | \\\ - /// | |

 *             | \_| ''\---/'' | |

 *              \ .-\__ `-` ___/-. /

 *           ___`. .' /--.--\ `. . __

 *        ."" '< `.___\_<|>_/___.' >'"".

 *       | | : `- \`.;`\ _ /`;.`/ - ` : | |

 *         \ \ `-. \_ __\ /__ _/ .-` / /

 * ======`-.____`-.___\_____/___.-`____.-'======

 *                    `=---='

 *

 * .............................................

 *          佛祖保佑             永无BUG

 */

 

UED双飞翼布局的更多相关文章

  1. 双飞翼布局介绍-始于淘宝UED

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

  2. CSS布局 -- 圣杯布局 & 双飞翼布局

    按照我的理解,其实圣杯布局跟双飞翼布局的实现,目的都是左右两栏固定宽度,中间部分自适应. 但在这里实现起来还是有一些区别的 [圣杯布局] 在这里,实现了左(200px) 右(220px) 宽度固定,中 ...

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

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

  4. css双飞翼布局

     双飞翼布局是一种比较灵活的布局,始于淘宝UED,玉伯提出的,他着重介绍的是双飞翼栅格布局. 三列布局为"双飞燕"布局,可以把三栏比作一只鸟,main部分相当是于鸟的身体,而lef ...

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

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

  6. 中间自适应，左右定宽的两种经典布局 ---- 圣杯布局 VS 双飞翼布局

    一.引子 最近学了些js框架,小有充实感,又深知如此节奏的前提需得基础扎实,于是回头想将原生CSS和Javascript回顾总结一番,先从CSS起,能集中它的就在基础的布局上,便查阅了相关资料,将布局 ...

  7. CSS 圣杯布局 / 双飞翼布局的实现

    工作的越久,有些基础知识我们可能就逐渐淡忘了,今天我们来回顾一下css的圣杯布局和双飞翼布局, 这两个名词你可能不熟, 那三栏布局你肯定就非常熟悉了, 就是两边定宽, 中间自适应 的 布局 1 , 圣 ...

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

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

  9. 双飞翼布局介绍-始于淘宝UED-2011年淘宝玉伯写的

    仔细分析各种布局的技术实现,可以发现下面三种技术被经常使用: 浮动 float 负边距 negative margin 相对定位 relative position 这是实现布局的三个最基本的原子技术 ...

随机推荐

  1. 客户端的验证插件validator

    简单,智能,令人愉悦的表单验证~~~ 官方文档:http://www.niceue.com/validator/ <!DOCTYPE html> <html> <head ...

  2. 手动添加kdump

    背景:     Linux嵌入式设备内核挂死后,无法自动重启,需要手动重启.而且如果当时没有连串口的话,就无法记录内核挂死时的堆栈,所以需要添加一种方式来记录内核挂死信息方便以后调试使用.设备中增加k ...

  3. 利用Node.js的Net模块实现一个命令行多人聊天室

    1.net模块基本API 要使用Node.js的net模块实现一个命令行聊天室,就必须先了解NET模块的API使用.NET模块API分为两大类:Server和Socket类.工厂方法. Server类 ...

  4. IE8/9 JQuery.Ajax 上传文件无效

    IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...

  5. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  6. 使用JavaScript为一张图片设置备选路径

    在做网页开发的时候,有时候希望给图片设置一个备选路径,即,当src属性对应的主路径加载失败的时候,图片可以马上切换到备选路径.这样,即使主路径失效了,显示备用路径也不会影响网页的正常体验. 注意到网页 ...

  7. [OC] NSURLSession

    有的程序员老了,还没听过NSURLSession 有的程序员还嫩,没用过NSURLConnection 有的程序员很单纯,他只知道AFN. NSURLConnection在iOS9被宣布弃用,NSUR ...

  8. iOS开发--ChildViewController实现订单页的切换

    先不说废话, 上效果图, 代码量也不大, 也不上传github骗星星了, 你们复制粘贴下代码, 就可以轻而易举的弄出一个小demo. 这个代码的实现并不复杂, 甚至于说非常简单, 就是逻辑有点小绕, ...

  9. 解决maven下载jar慢的问题(如何更换Maven下载源)

    修改 配置文件 maven 安装 路径 F:\apache-maven-3.3.9\conf 修改 settings.xml 在 <mirrors> <!-- mirror | Sp ...

  10. Python处理Excel表格

    同事小王今天说他有一个Excel表格,表格如下,一列是姓名,一列是电话号码,总共有大概2000行数据. 有的姓名占了一行,有的占了两行,还有一些占了三行的.如下图: 他问我可不可以全部统一成一行,而且 ...