精华内容
下载资源
问答
  • 双飞翼布局

    2017-02-23 19:14:57
    双飞翼布局

    在面试中碰到了这样一题,非常有意思,但也非常基础,然而我却忘了。。。忘了。。。。。。

    需求:仅用html+css写出中间内容区域宽度自适应,两边宽度固定的布局,并且要求中间的内容区域要先被渲染。

    很明显这是一个经典的三列布局,也就是圣杯布局中的一种,但是注意最后的一个需求,要求中间内容要先被渲染,也就是说我们要将中间的块放到最前面,让其先被浏览器渲染,这种布局方式叫‘双飞翼’,最先是由玉伯提出的,啊~多么优秀的工程师思维啊,不愧是玉伯,在淘宝这种拥有巨量请求的网站,让主题内容先渲染使用户优先看到,这直接就使用户体验提升了不止一个档次,不过淘宝一般两侧也是放广告,笑。。。听说后来玉伯走了,流言调侃:不会是因为让当时的广告没先出来吧,哈哈这只是笑话调侃下而已,大家不要较真~下面开始代码

    //doubleWingsLayout.html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            html,body{
                width:100%;
                margin:0;
                padding:0;
            }
            .container{
                margin-left:150px;
                margin-right:200px;
            }
            .center{
                width:100%;
                background-color: orangered;
                height:200px;
                float: left;
            }
            .left{
                width:150px;
                height:180px;
                float: left;
                background-color: darkseagreen;
                margin-left: calc(-100% - 150px);
            }
            .right{
                width:200px;
                height:190px;
                float: right;
                background-color: cornflowerblue;
                margin-right:-200px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="center">左侧内容</div>
            <div class="left">主体内容</div>
            <div class="right">右侧内容</div>
        </div>
    </body>
    </html>
    

    两边的margin值就是两个翼,很形象有木有 0 0,原理的话大家看css的代码就能看懂的了~

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,478
精华内容 591
关键字:

双飞翼布局