圣杯布局和双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的,就是两边顶宽,中间自适应的
三栏布局,中间栏要在放在文档流前面以优先渲染。
圣杯布局和双飞翼布局解决问题的方案在前一半是相同的,也就是三栏全部
float 浮动,但左右两栏加上负 margin 让其跟中间栏 div 并排,以形成三栏布
局。

具体的不同我们先从代码开始对比:
(1)圣杯布局的 html 代码如下:
middle 部分首先要放在 container 的最前部分。然后是 left,right

<body>
<div> class="header">
   <h4>header</h4>
</div>
<div class="container">
   <div class="middle">
        <h4>middle</h4>
   </div>
    <div class="left">
       <h4>left</h4>
   </div>
    <div class="right">
       <h4>right</h4>
   </div>
 </div>
<div class="footer">
       <h4>footer</h4>
   </div>
</body>

(2)双飞翼布局的 html 代码如下:
双飞翼布局始于淘宝 UED,如果把三栏布局比作一只大鸟,可以把 main 看
成是鸟的身体,sub 和 extra 则是鸟的翅膀。这个布局的实现思路是,先把最重
要的身体部分放好,然后再将翅膀移动到适当的地方,其实跟上边的圣杯布局差
不多的

<body>
<div> class="header">
   <h4>header</h4>
</div>
<div class="main">
   <div class="main-inner">
        <h4>main</h4>
   </div>
    <div class="sub">
       <h4>sub</h4>
   </div>
    <div class="extra">
       <h4>extra</h4>
   </div>
 </div>
<div class="footer">
       <h4>footer</h4>
   </div>
</body>

我们再从 css 代码上进行一下对比
(1)圣杯布局的 css 代码如下:

<style type="text/css">
  *{margin: 0;
    padding: 0;
   }
   body{
    min-width: 700px;
   }
   .header,.footer{
   background:#ff9999;
   text-align:center;
   height:50px;
   line-height:50px;
   }
   .left,.middle,.right{
   position: relative;
   float: left;
   min-height: 130px;
   line-height:130px;
   text-align:center;
   }
   .container{
   padding:0 220px 0 200px;
   overflow:hidden;
   }
   .left{
   margin-left:-100%;
   left:-200px;
   width:200px;
   background:#99ffff;
   }
   .right{
   margin-left:-220px;
   right:-220px;
   width:220px;
   background:#ccff99;
   }
   .middle{
   width:100%;
   background:#ccffff;
   word-break:break-all;
   }
   .footer{
   clear:both;
   }
   </style>

(2)双飞翼布局的 css 代码如下:

<style type="text/css">
  *{margin: 0;
    padding: 0;
   }
   body{
    min-width: 700px;
   }
   .header,.footer{
   border:1px solid #333;
   background:#ff9999;
   text-align:center;
   height:50px;
   line-height:50px;
   }
   .sub,.main,.extra{
   float: left;
   min-height: 130px;
   line-height:130px;
   text-align:center;
   }
   .sub{
   margin-left:-100%;
   width:220px;
   background:#99ffff;
   }
   .extra{
   margin-left:-220px;
   width:220px;
   background:#ccffff;
   }
   .main{
   width:100%;
   }
   .main-inner{
   maigin-left:200px;
   margin-right:220px;
   min-height:130px;
   background:#ccff99;
   word-break:break-all;
   }
   .footer{
   clear:both;
   }
</style>

双飞翼布局的好处:
(1)主要的内容先加载的优化;
(2)兼容目前所有的主流浏览器,包括 IE6 在内;
(3)实现不同的布局方式,可以通过调整相关 CSS 属性即可实现。

 

https://www.imooc.com/

发布者

deng

听闻余生久不遇,相逢别错过。

发表评论

电子邮件地址不会被公开。 必填项已用*标注