css3布局篇（双飞翼）

时间：2018-07-19 17:22:43 阅读：171 评论：0 收藏：0 [点我收藏+]

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

View Code

菜鸟一枚

css3布局篇（双飞翼）

标签：执行没有增加第一个自适应隐藏分享去掉 doc

原文地址：https://www.cnblogs.com/LCH-M/p/9336624.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行