双飞翼布局与圣杯布局——2019年1月15日 - 作业栏目

Home > List of blog posts > 双飞翼布局与圣杯布局——2019年1月15日

Blogger Information

Blog 40

fans 1

comment 0

visits 32733

Special Recommendation

More>

Related recommendations

Related Tutorials

Popular Recommendations

Latest courses

The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

1417479 times of learning
Collection
PHP introductory tutorial one: Learn PHP in one week

4258667 times of learning
Collection
JAVA Beginner's Video Tutorial

2483925 times of learning
Collection

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

双飞翼布局与圣杯布局——2019年1月15日

李明伟的博客

Original

596 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>

运行结果：

双飞翼布局：

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

实例

<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

js常用函数slice()和splice()(以及各类常用函数)——2019年1月16日

2019-01-20 10:28:05