双飞翼布局与圣杯布局——2019年1月15日-CSDN博客

本文链接：https://blog.csdn.net/qq_43287952/article/details/93325515

圣杯布局与双飞翼布局是目前最常见的布局

双飞翼布局：

——结构图：先中间后两边。

                    20190117162538.png

相关代码：

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <!-- 头 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="">首页</a></li>
                <li class="item"><a href="">公司新闻</a></li>
                <li class="item"><a href="">最新产品</a></li>
                <li class="item"><a href="">联系我们</a></li>
            </ul>
        </div>
    </div>
        <!--【双飞翼】中间主体的区块模拟 -->
    <div class="container">
            <!-- 创建双飞翼布局使用的DOM结构 -->
            <div class="wrap"><!-- 进行包裹的父级容器 -->
                <div class="main">
                    主体内容区
                </div>
            </div>
                <div class="left">左侧</div>
                <div class="right">右侧</div>
    </div>
        <!-- 底型 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">php中文网</a>  
                <a href="">89126620</a>  
                <a href="">安徽合肥</a>  
            </p>
        </div>
    </div>
</body>
</html>

总结：双飞翼布局的步骤：

第一步：主体容器设置总宽度，并水平居中

第二步：左右两侧固定宽度，并且区块自适应

第三步：中间，左右区块全部左浮动

第四步：将left和right拉回到它们正确的位置上（使用margin外边距）

第五步：将主体区块main显示出来

圣杯布局：

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body>
    <!-- 头 -->
    <div class="header">
        <div class="content">
            <ul class="nav">
                <li class="item"><a href="">首页</a></li>
                <li class="item"><a href="">公司新闻</a></li>
                <li class="item"><a href="">最新产品</a></li>
                <li class="item"><a href="">联系我们</a></li>
            </ul>
        </div>
    </div>
        <!--【圣杯】中间主体的区块模拟 -->
    <div class="container">
            <!-- 创建圣杯布局使用的DOM结构 -->
                <div class="main">
                    主体内容区
                </div>
                <div class="left">左侧</div>
                <div class="right">右侧</div>
    </div>
        <!-- 底型 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">php中文网</a>  
                <a href="">89126620</a>  
                <a href="">安徽合肥</a>  
            </p>
        </div>
    </div>
</body>
</html>

总结：相较于双飞翼布局更加简化，使用相对定位实现布局