圣杯、双飞翼、flex简单示例

最新推荐文章于 2022-05-28 12:03:19 发布

Sophia1010

最新推荐文章于 2022-05-28 12:03:19 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏：前端基础

本文链接：https://blog.youkuaiyun.com/sophia1010/article/details/79392924

前端基础专栏收录该内容

27 篇文章

订阅专栏

本文详细介绍了三种不同的网页布局方法：圣杯布局、双飞翼布局和Flex布局，包括HTML结构及CSS样式设置，帮助读者理解并掌握这些布局技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>

<head>
    <title>圣杯布局</title>
    <style>
    .header{
        min-height: 50px;
        border: 1px solid red;
        text-align: center;
    }
    .footer{
        clear:both;
        min-height: 50px;
        border: 1px solid red;
        text-align: center;
    }
    .container {
        padding: 0 210px 0 220px;
    }

    .container .grail {
        min-height:900px;
        float: left;
        position: relative;
    }

    .main {
        width: 100%;
        background-color: red;
    }

    .left {
        width: 220px;
        background-color: blue;
        margin-left: -100%;
        left: -220px;
    }

    .right {
        width: 210px;
        background-color: yellow;
        margin-left: -210px;
        right: -210px;
    }
    </style>
</head>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="grail main">
            <h1>main</h1>
            <h1>1.给出html结构</h1>
            <h1>2.设置基本样式 中(width 100% left xxx1px right xxx2px)左右宽度高度颜色/h1>
            <h1>3.将main元素都设置成左浮动,父元素container位置左右分别空出xxx1p|xxx2px </h1>
            <h1>4.设置left元素和right元素负外边距 margin-left -xxx1p| -xxx2px  </h1>
            <h1>5.用相对定位将left和right分别移动留位置</h1></div>
        <div class="grail left">left</div>
        <div class="grail right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>

<html>

<head>
    <title>双飞翼布局</title>
    <style>
    .container .grail {
        min-height: 900px;
        float: left;
    }
    .main {
        width: 100%;
        background-color: red;
    }
    .left {
        width: 220px;
        background-color: blue;
        margin-left: -100%;
    }

    .right {
        width: 210px;
        background-color: yellow;
        margin-left: -210px;
    }
    .content{
        margin: 0 210px 0 220px;
    }
    </style>
</head>

<body>
    <div class="container">
        <div class="grail main">
            <div class="content">
                <h1>main</h1>
                <h1>1.给出html结构</h1>
                <h1>2.设置基本样式 中(width 100% left xxx1px right xxx2px)左右宽度高度颜色/h1>
                <h1>3.设置left元素和right元素负外边距 margin-left -xxx1p| -xxx2px  </h1>
                <h1>4.将main里面的content元素设置外边距 -xxx1px| -xxx2px </h1>
            </div>
        </div>
        <div class="grail left">left</div>
        <div class="grail right">right</div>
    </div>
</body>

</html>

<html>

<head>
    <title>flex布局</title>
    <style>
    .header {
        min-height: 50px;
        border: 1px solid red;
        text-align: center;
    }

    .footer {
        clear: both;
        min-height: 50px;
        border: 1px solid red;
        text-align: center;
    }

    .container {
        display: flex;
        min-height: 600px;
    }

    .main {
        flex-grow: 1;
        background-color: blue;
    }

    .left {
        order: -1;
        flex-basis: 200px;
        background-color: red;
    }

    .right {
        flex-basis: 300px;
        background-color: yellow;
    }
    </style>
</head>

<body>
    <div class="header">header</div>
    <div class="container">
        <div class="main">
            <h1>main</h1>
            <h1>1.给出html结构</h1>
            <h1>2.将container设置成一个FLEX容器</h1>
            <h1>3.将main left right元素进行初始设置背景颜色，根据order设置排列顺序</h1>
            <h1>4.flex-grow设置main的放大比例</h1>
            <h1>5.</h1></div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>

</html>