乐趣区

关于html:圣杯布局与双飞翼布局

jiezi

圣杯布局与双飞翼布局

  • 圣杯布局和双飞翼布局都是为了实现一个两侧宽度固定，两头宽度自适应的三栏布局。(两头先加载渲染)

圣杯布局 -Example

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="origin" />
    <meta property="og:description" content="圣杯布局" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> 圣杯布局 </title>
</head>
<style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        padding: 0;
        margin: 0;
    }

    body {min-width: 550px;}

    * {
        margin: 0;
        padding: 0;
    }

    .header,
    .footer {
        background: gray;
        width: 100%;
    }

    .footer {clear: both;}

    .main {
        height: 200px;
        padding: 0 150px 0 200px;
        background: greenyellow;
        *zoom: 1;
    }

    .left,
    .center,
    .right {float: left;}

    .center {
        width: 100%;
        height: 200px;
        background: red;
    }

    .left {
        width: 200px;
        height: 200px;
        background: yellow;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        width: 150px;
        height: 200px;
        background: gainsboro;
        margin-left: -150px;
        position: relative;
        left: 150px;
        }
</style>

<body>
    <div class="header">
        头部
    </div>
    <div class="main">
        <div class="center"> 两头两头两头两头两头两头两头后 </div>
        <div class="left"> 右边 </div>
        <div class="right"> 左边 </div>
    </div>
    <div class="footer">
        底部
    </div>
</body>

</html>

双飞翼布局 -Example

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="referrer" content="origin" />
    <meta property="og:description" content="双飞翼布局" />
    <meta http-equiv="Cache-Control" content="no-transform" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title> 双飞翼布局 </title>
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    .main>div {float: left;}

    .left {
        width: 200px;
        background: red;
        margin-left: -100%;
    }

    .right {
        width: 200px;
        background: blue;
        margin-left: -200px;
    }

    .middle {
        width: 100%;
        background: yellow;

    }

    .content {
        margin-left: 200px;
        margin-right: 200px;
    }
</style>
<body>
    <div class="main">
        <div class="middle">
            <div class="content">
                两头
            </div>
        </div>
        <div class="left">
            右边
        </div>
        <div class="right">
            左边
        </div>
    </div>
</body>
</html>

长处

    1. 兼容性好，兼容若有支流浏览器，包含万恶的 IE6
    1. 能够实现次要内容的优先加载

额定知识点

  • 其实三列布局的形式还有很多，但也有各自的毛病
  • 1. 如果左右两列用 position: absolute 定位布局做外层设计须要有个蕴含块设置（否则是绝对浏览器可视区域）这样会层级，页面管制绝对麻烦
  • 2. 用浮动布局的话，中间层要做到先加载实现不了
  • 3.flex 布局低版本浏览器有些还不反对

Thinking in JackDan

退出移动版