CSS--圣杯布局

最新推荐文章于 2024-06-07 19:31:00 发布

susud

最新推荐文章于 2024-06-07 19:31:00 发布

阅读量156

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/susud/article/details/128220225

版权

圣杯布局主要为

上下固定

左右固定

中间自适应

在这里为左200px，右300px

步骤思路

设置主体

第一步：对上下取固定，这里直接用h5 的语义化标签，header和footer

第二步：中间部分将三个div放在一个div盒子里

css内容

第一步：对中间盒子设置padding-left和padding-right，分别为左右两边盒子需要的宽度

第二步：让中间三个盒子浮动

第三步：设置左右两边盒子的margin-left（左边距），左边的为-100%，右边的为（负右边盒子宽度）

第六步：对左右盒子设置相对定位，position:relative，让盒子相对于自身原来的位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        header{
            width: 100vw;
            height: 20vh;
            background-color: #3e4149;
        }
        footer{
            width: 100vw;
            height: 20vh;
            background-color: #ffc8c8;
        }
        .contain{
            height: 60vh;
            padding: 0 200px;
        }
        .clearfix::after{
            content: '';
            display: block;
            clear: both;
        }

        .center{
            float: left;
            width: 100%;
            height: 100%;
            background-color: #11999e;
        }
        .left{
            float: left;
            width: 200px;
            height: 100%;
            margin-left: -100%;
            background-color: #0d4c4f;
            position: relative;
            left: -200px;
        }
        .right{
            float: left;
            height: 100%;
            width: 200px;
            margin-left: -200px;
            background-color: #0d4c4f;
            position: relative;
            right: -200px;
        }
        

    </style>
</head>
<body>
    <header></header>
    <div class="contain clearfix">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <footer></footer>
</body>
</html>