您的位置：首页 > 其它

双飞翼布局

2015-02-25 16:29 204 查看
双飞翼布局是一种灵活的布局，始于淘宝UED，应该是玉伯提出的。如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。

来查看一个基本实例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset='utf-8' />
<title>双飞翼布局实例</title>
<meta name='author' content='独行冰海' />
<style>
.main {
float: left;
width: 100%;
background:#39c;
height:300px;
}
.sub {
float: left;
width: 480px;
margin-left: -100%;
background:#f60;
height:300px;
}
.extra {
float: left;
width: 190px;
margin-left: -190px;
background:#666;
height:300px;
}
</style>
</head>
<body>
<div id="page">
<div id="hd"></div>
<div id="bd">
<div class="main"></div>
<div class="sub"></div>
<div class="extra"></div>
</div>
<div id="ft"></div>
</div>
</body>
</html>优点：
实现了内容与布局的分离，即Any-Order Columns.
main部分是自适应宽度的，很容易在定宽布局和流体布局中切换。
任何一栏都可以是最高栏，不会出问题。
需要的hack非常少（就一个针对ie6的清除浮动hack:_zoom: 1;）
在浏览器上的兼容性非常好，IE5.5以上都支持。
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                网页布局
                                                双飞翼布局
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航