圣杯布局和双飞翼布局

最新推荐文章于 2021-04-17 09:52:09 发布

椰椰要努力

最新推荐文章于 2021-04-17 09:52:09 发布

阅读量249

点赞数

分类专栏： HTML、CSS 文章标签：布局

本文链接：https://blog.csdn.net/gladys_1111/article/details/77102019

版权

HTML、CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

一：圣杯布局

重点：content的padding，left的margin-left和left值，right的margin-left和right值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        * {
            text-align: center;
        }
        .header {
            height: 50px;
            line-height: 50px;
            background-color: #ff6666;
        }

        .content {
            background-color: lightblue;
            padding: 0 200px;           /* √ */
            overflow: hidden;     /* 清除浮动 */
        }

        .content .main{
            width: 100%;
            height: 300px;
            line-height: 300px;
            float: left;          
            background-color: lightcoral;
        }
        .content .left, .content .right {
            float: left;
            width: 180px;
            height: 300px;
            line-height: 300px;
            background-color: antiquewhite;
            position: relative;        /* √ */
        }
        .content .left {
            margin-left: -100%;        /* √ */
            left: -200px;              /* √ */
        }
        .content .right {
            margin-left: -180px;      /* √ */
            right: -200px;            /* √ */
        } 

        .footer {
            height: 50px;
            line-height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div>
     <!--头部-->
    <div class="header">header</div>

     <!--主题内容-->
    <div class="content">
        <div class="main">main</div>     <!-- 将main放在前面让其先加载出来 -->
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <!--// 底部-->
    <div class="footer">footer</div>
</div>
</body>
</html>

页面效果：
这里写图片描述

二、双飞翼布局
重点：main外面包了一层main-wrap，main-warp的宽度、浮动，main的margin，left、right的margin-left。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        * {
            text-align: center;
        }
        .header {
            height: 50px;
            line-height: 50px;
            background-color: #ff6666;
        }

        .content {
            background-color: lightblue;
            overflow: hidden;     /* 清除浮动 */
        }

        .content .main-wrap {                /* √ */
            width: 100%;
            float: left;
        }
        .content .main-wrap .main{
            height: 300px;
            margin: 0 200px;                /* √ */
            line-height: 300px;
            background-color: lightcoral;
        }
        .content .left, .content .right {
            float: left;
            width: 180px;
            height: 300px;
            line-height: 300px;
            background-color: antiquewhite;
        }
        .content .left {
            margin-left: -100%;              /* √ */
        }
        .content .right {
            margin-left: -180px;             /* √ */
        }

        .footer {
            height: 50px;
            line-height: 50px;
            background-color: lightgreen;
        }
    </style>
</head>
<body>
<div>
    <!--头部-->
    <div class="header">header</div>

    <!--主题内容-->
    <div class="content">
        <div class="main-wrap">
            <div class="main">main</div>     <!-- 将main放在前面让其先加载出来 -->
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <!--// 底部-->
    <div class="footer">footer</div>
</div>
</body>
</html>