css布局--圣杯布局

最新推荐文章于 2024-09-26 22:28:09 发布

非星

最新推荐文章于 2024-09-26 22:28:09 发布

阅读量362

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/qq_33680352/article/details/111137874

版权

本文介绍了一种称为圣杯布局的网页布局技巧，该布局利用非主要内容覆盖父元素的padding区域来预留位置，使得主要内容可以优先加载并展示。通过浮动、定位等CSS属性实现三栏布局，左侧和右侧栏通过定位调整到正确位置。

摘要由CSDN通过智能技术生成

圣杯布局

圣杯布局的特点

借助的是其他非主要元素覆盖了其父元素的padding值所占据的宽度，非主要元素（侧边栏）只是占据了全部容器的padding值部分
优点

可优先渲染主要部分

效果

在这里插入图片描述

实现方法

为main设置左右padding用来给侧边栏预留位置
main内三个div设置为浮动
left，right部分通过定位到达相应位置

代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            min-width: 550px;
        }
        *{
            margin:0;
            padding: 0;
        }
        .header , .footer{
            background: gray;
            width: 100%;
        }
        .footer{
            clear: both;
        }
        .main{
            height: 200px;
            padding: 0 150px 0 200px;
        }
        .left , .center , .right{
            float: left; 
        }
        .center{
            width: 100%;
            height: 200px;
            background-color:lightcoral;
        }
        .left {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            width: 150px;
            height: 200px;
            background-color: lightgreen;
            margin-left: -150px;
            position: relative;
            left: 150px;
        }
    </style>
   <body>
       
   <div class="header">
            头部
   </div>
   <div class="main">
       <div class="center">中间</div>
       <div class="left">
       左边
       </div>
       <div class="right">
       右边
       </div>
   </div>
   <div class="footer">
       底部
   </div>
   </body>
</html>