首页 > > 网页制作 > css >

css中的圣杯布局和双飞翼布局

2018-06-24 02:00:12来源：未知阅读 ()

圣杯布局

布局要求：

三列布局，中间自适应，两边定宽

中间栏要在浏览器优先渲染

允许任意列的高度最高

用最简单的CSS、最少的HACK语句

解释说明：

1.min-width:700px是为了当页面缩小到指定的700px的时候，页面内容宽度不再随着浏览器缩小。是为了电脑的正常浏览效果

2.注意到container设置的值0 220px 0 200px,上右下左，所以left 设置widh:200px,right设置width:220px

3.设置min-height:300px，是让三列看起来没那么的矮

4.浮动的情况下，定义负边距会使div向上移动，margin-left:-100%会使移动到最左则，然后再加上left：-200px，正好使left归位。right原理相同。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style type="text/css">
      *{
          margin: 0;
          padding: 0;
      }
      body{
          min-width: 700px;
      }
      .header,.footer{
       float: left;
       width: 100%;
       background: #f60;
       height: 40px;
       line-height: 40px;
       text-align: center;
      }
      .container{
          padding: 0 220px 0 200px;
      }
      .left,.middle,.right{
          position: relative;
          float: left;
          min-height: 300px;
      }
      .middle{
          width: 100%;
          background: #1a5acd;
      }
      .left{
          width: 200px;
          background: #f00;
          margin-left: -100%;
          left: -200px;
      }
      .right{
          width: 220px;
          background: #0f0;
          margin-left: -220px;
          right:-220px;
      }

    </style>
</head>
<body>
    <div class="header">
        <h4>头部</h4>
    </div>
    <div class="container">
        <div class="middle">
            <h4>middle</h4>
            <p>这是页面中间内容</p>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>这是页面左侧内容</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>这是页面右面的内容</p>
        </div>
    </div>
    <div class="footer">
        <h4>尾部</h4>
    </div>
</body>
</html>

双飞翼布局：

经过淘宝工程师针对圣杯布局改良后得出双飞翼布局

去掉相对布局，只需要浮动和负边距

解释说明：双飞翼布局得到的效果试图与圣杯布局一样，只不过是写法不太一样，主要是没有用container包括中间三部分，相对定位也没用到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    body{
        min-width:700px; 
    }
    .header,.footer{
        width: 100%;
        float: left;
        height: 40px;
        background: #ddd;
        text-align: center;
        line-height: 40px;
    }
    .left,.right,.middle{
        float: left;
        min-height: 300px;
    }
    .middle{
        width: 100%;
        min-height:300px; 
    }
    .middle-inner{
        margin-left: 200px;
        margin-right: 220px;
        background: red;
        min-height:300px; 

    }
    .left{
        width: 200px;
        background: #0F0;
        margin-left: -100%;
    }
    .right{
        width: 220px;
        background: blue;
        margin-left: -220px;
    }
    </style>
</head>
<body>
    <div class="header">
        <h4>头部</h4>
    </div>
        <div class="middle">
           <div class="middle-inner">
            <h4>middle</h4>
            <p>这是页面中间内容</p>
           </div>
        </div>
        <div class="left">
            <h4>left</h4>
            <p>这是页面左侧内容</p>
        </div>
        <div class="right">
            <h4>right</h4>
            <p>这是页面右面内容</p>
        </div>
    <div class="footer">
        <h4>尾部</h4>
    </div>
</body>
</html>