css(四)、双飞翼布局

一、双飞翼布局

经典三列布局,也叫做圣杯布局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一个布局模型概念,在国内最早是由淘宝UED的工程师传播开来,在中国也有叫法是双飞翼布局,它的布局要求有几点:

1、三列布局,中间宽度自适应,两边定宽; 
2、中间栏要在浏览器中优先展示渲染; 
3、允许任意列的高度最高;
4、要求只用一个额外的DIV标签; 
5、要求用最简单的CSS、最少的HACK语句;

在不增加额外标签的情况下,圣杯布局已经非常完美,圣杯布局使用了相对定位,以后布局是有局限性的,而且宽度控制要改的地方也多。在淘宝UED(User Experience Design)探讨下,增加多一个div就可以不用相对布局了,只用到了浮动和负边距,这就是我们所说的双飞翼布局,实现的代码如下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>双飞翼</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body,
            html {
                height: 100%;
                font: 20px/40px "microsoft yahei";
                color: white;
            }
            
            #container {
                width: 90%;
                margin: 0 auto;
                height: 100%;
            }
            
            #header,
            #footer {
                height: 12.5%;
                background: deepskyblue;
            }
            
            #main {
                height: 75%;
            }
            
            #center,
            #left,
            #right {
                height: 100%;
                float: left;
            }
            
            #center {
                width: 100%;
                background: lightgreen;
            }
            
            #right {
                background: lightblue;
                width: 20%;
                margin-left: -20%;
            }
            
            #left {
                background: lightcoral;
                width: 20%;
                margin-left: -100%;
            }
            
            #main-inner {
                padding-left: 20%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">
                header
            </div>
            <div id="main">
                <div id="center">
                    <div id="main-inner">
                        center
                    </div>
                </div>
                <div id="left">
                    left
                </div>
                <div id="right">
                    right
                </div>
            </div>
            <div id="footer">
                footer
            </div>
        </div>
    </body>
</html>

结果:

css(四)、双飞翼布局

相关推荐