简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 双飞翼布局与圣杯布局——2019年1月15日
Blogger Information
Blog 40
fans 1
comment 0
visits 32439
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
双飞翼布局与圣杯布局——2019年1月15日
李明伟的博客
Original
590 people have browsed it

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

以下是通用代码：

<style>
    .header{
        width: 100%;
        background-color: lightgray;
    }
    .header .content{
        width: 1000px;
        height: 60px;
        background-color: lightgreen;
        margin: 0 auto;
    }
    .header .content .nav{
        margin: 0;
        padding: 0;
    }
    .header .content .nav .item{
        list-style: none;
    }
    .header .content .nav .item a{
        float: left;
        padding:0 20px;
        min-width: 10px;
        min-height: 10px;//设置段落的最小高度
        line-height: 60px;//line-height
        text-decoration: none;
        text-align: center;
    }
    .header .content .nav .item a:hover{
        background-color: #444444;
        color: azure;
    }
    .container{
        width: 1000px;
        height: 300px;
        background-color: lightcyan;
        margin:5px auto;
    }
    .footer{
        width: 100%;
        background-color: lightgray;
    }
    .footer .content{
        width: 1000px;
        height: 60px;
        text-align: center;
        margin:5px auto;
        line-height: 60px;
    }

    .footer .content p a{
        text-decoration: none;
    }

    .footer .content p a:hover{
        color: aqua;
    }
</style>
<!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"></div>
        <!-- 底型 -->
    <div class="footer">
        <div class="content">
            <p>
                <a href="">php中文网</a>  
                <a href="">89126620</a>  
                <a href="">安徽合肥</a>  
            </p>
        </div>
    </div>
</body>
</html>

运行结果：20190117161711.png 

双飞翼布局：

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

                        20190117162538.png

相关代码：

实例

<style>
        .header{
            width: 100%;
            background-color: lightgray;
        }
        .header .content{
            width: 1000px;
            height: 60px;
            background-color: lightgreen;
            margin: 0 auto;
        }
        .header .content .nav{
            margin: 0;
            padding: 0;
        }
        .header .content .nav .item{
            list-style: none;
        }
        .header .content .nav .item a{
            float: left;
            padding:0 20px;
            min-width: 10px;
            min-height: 10px;
            line-height: 60px;
            text-decoration: none;
            text-align: center;
        }
        .header .content .nav .item a:hover{
            background-color: #444444;
            color: azure;
        }
        /* 第一步：主体容器设置总宽度，并水平居中 */
        .container{
            width: 1000px;
            min-height: 600px;
            background-color: lightcyan;
            margin:5px auto;
        }

        /* 第二步：左，右两侧固定宽度，中间区块自适应 */
        /* 中间区块宽度设置在它的容器wrap中 */
        .wrap{
            width: inherit;
            /* inherit关键字代表“使用指定给父元素的所有值” */
            min-height: inherit;
            background-color: cyan;
        }
        /* 设置左右区块的宽度和高度（因为无内容所以设置最小高度），并设置参考色块 */
        
        .left{
            width: 200px;
            min-height: 600px;
            background-color: lightcoral;
        }

        .right{
            width: 200px;
            min-height: 600px;
            background-color: lightgreen;
        }

        /* 第三步:中间，左右区块全左浮动 */

        .wrap,.right,.left{
            float: left;
        }
            
        /* 第四步：将left和right拉回到他们正确的位置上 */
        /* 通过设置区块的负边距的方式，实现向反方向移动区块 */

        .left{
            margin-left: -100%;
        }

        .right{
            margin-left: -200px;
        }

        /* 第五步：将主体区块main显示出来 */
        .main{
            padding-left: 200px;
            padding-right: 200px;
        }


        .footer{
            width: 100%;
            background-color: lightgray;
        }
        .footer .content{
            width: 1000px;
            height: 60px;
            text-align: center;
            margin:5px auto;
            line-height: 60px;
        }
    
        .footer .content p a{
            text-decoration: none;
        }
    
        .footer .content p a:hover{
            color: aqua;
        }

      
    </style>
    <!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显示出来


圣杯布局：

    

实例

<style>
        .header{
            width: 100%;
            background-color: lightgray;
        }
        .header .content{
            width: 1000px;
            height: 60px;
            background-color: lightgreen;
            margin: 0 auto;
        }
        .header .content .nav{
            margin: 0;
            padding: 0;
        }
        .header .content .nav .item{
            list-style: none;
        }
        .header .content .nav .item a{
            float: left;
            padding:0 20px;
            min-width: 10px;
            min-height: 10px;
            line-height: 60px;
            text-decoration: none;
            text-align: center;
        }
        .header .content .nav .item a:hover{
            background-color: #444444;
            color: azure;
        }
        /* 第一步：主体容器设置总宽度，并水平居中 */
        .container{
            width: 600px;
            min-height: 600px;
            background-color: lightcyan;
            margin:5px auto;
        }

        /* 第二步：左，右两侧固定宽度，中间区块自适应 */
        /* 中间区块宽度设置在它的容器wrap中 */
        .main{
            width: inherit;
            /* inherit关键字代表“使用指定给父元素的所有值” */
            min-height: inherit;
            background-color: cyan;
        }
        /* 设置左右区块的宽度和高度（因为无内容所以设置最小高度），并设置参考色块 */
        
        .left{
            width: 200px;
            min-height: 600px;
            background-color: lightcoral;
        }

        .right{
            width: 200px;
            min-height: 600px;
            background-color: lightgreen;
        }

        /* 第三步:中间，左右区块全左浮动 */

        .main,.right,.left{
            float: left;
        }
            
        /* 第四步：将left和right拉回到他们正确的位置上 */
        /* 通过设置区块的负边距的方式，实现向反方向移动区块 */

        .left{
            margin-left: -100%;
        }

        .right{
            margin-left: -200px;
        }

        /* 第五步：将主体区块main显示出来 */
        .right{
            position: relative;
            left: 200px;
        }

        .left{
            position: relative;
            left: -200px;
        }

        .footer{
            width: 100%;
            background-color: lightgray;
        }
        .footer .content{
            width: 1000px;
            height: 60px;
            text-align: center;
            margin:5px auto;
            line-height: 60px;
        }
    
        .footer .content p a{
            text-decoration: none;
        }
    
        .footer .content p a:hover{
            color: aqua;
        }

      
    </style>
    <!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

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

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！