双飞翼布局

双飞翼布局

zhongjian
zuobian
zhongjian

作用:

       是淘宝团队提出一种优化写法，main写在前面，优先加载，优先渲染，而且兼容性好。

　　中间部分优先加载,有利于用户体验;

<!DOCTYPE html>
<html>
    <head>
        <title>
         双飞翼布局
        </title>
        <meta charset="utf-8"></meta>
    </head>
    <style>
     *{
      margin:0;
      padding:0
      }
     .content{
        float:left;
        width:100%;
     }
     .zj{
        background-color:red;
        width:100%;
        padding:0 200px
     }
     .zb{
        width: 200px;
        background-color:blue;
        float:left;
        margin-left:-100%
     }
     .yb{
       width:200px;
       background-color:pink;
       float:left;
       margin-left:-200px
     }
    </style>
    <body>
        <div style="width:100%;height:100%">

            <div class="content">
                <div class="zj">
                zhongjian
                </div>
            </div>
            
            <div class='zb'>
                zuobian
            </div>
            <div class = 'yb'>
                zhongjian
            </div>
        </div>
    </body>
<html>

 

posted @ 2020-11-18 10:18  山哥（狄某人）  阅读(55)  评论(0)    收藏  举报