圣杯布局（完整实现思路）

最新推荐文章于 2024-06-11 14:46:29 发布

斑码大前端

最新推荐文章于 2024-06-11 14:46:29 发布

阅读量1.2k

点赞数 1

文章标签： 1024程序员节 css3 css html5 html

本文链接：https://blog.csdn.net/weixin_50723623/article/details/109268394

版权

目标：实现三栏布局，且要求最先渲染主体内容

实现步骤：

主体内容在左右侧边栏之上
三个部分向左浮动
左边栏的margin-left: -100%;
右边栏的margin-left: - 右边栏的宽度
设置父元素的padding-left: 左边栏的宽度
设置父元素的padding-right：右边栏的宽度
设置左右边栏为相对定位
设置左边栏的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>
        * {
            margin: 0;
            padding: 0;
        }
        .header,
        .footer {
            height: 100px;
            background-color: purple;
            font-size: 50px;
            /* 文字水平居中 */
            text-align: center;
            /* 字体颜色 */
            color: white;
            /* 字体垂直居中 */
            line-height: 100px;
            min-width: 650px;
        }
        .main {
            /* 解决父元素的高度塌陷 */
            overflow: hidden;
            /* 设置的值为左边栏的宽度 */
            padding-left: 200px;
            /* 设置的值为右边栏的宽度 */
            padding-right: 250px;
            min-width: 200px;
        }
        
        .left {
            width: 200px;
            height: 400px;
            background-color: rgb(190, 147, 66);
            font-size: 30px;
            float: left;
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            width: 250px;
            height: 400px;
            background-color: rgb(17, 153, 153);
            font-size: 30px;
            text-align: center;
            float: left;
            margin-left: -250px;
            position: relative;
            right: -250px;
        }
        .content {
            background-color: pink;
            color: blue;
            /* 向左浮动 */
            float: left;
        }


    </style>
</head>
<body>
    <div class="header">网站头部</div>
    <div class="main">
        <!-- 三栏布局：固比固 -->
        <div class="content">
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
            网站的主体内容
        </div>
        <div class="left">左边栏</div>
        <div class="right">右边栏</div>
    </div>
    <div class="footer">网站底部</div>
</body>
</html>

斑码大前端

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局（完整实现思路）

目标：实现三栏布局，且要求最先渲染主体内容实现步骤：主体内容在左右侧边栏之上三个部分向左浮动左边栏的margin-left: -100%;右边栏的margin-left: - 右边栏的宽度设置父元素的padding-left: 左边栏的宽度设置父元素的padding-right：右边栏的宽度设置左右边栏为相对定位设置左边栏的left值为 - 左边栏的宽度设置右边栏的right值为 - 右边栏的宽度执行代码：<!DOCTYPE html><html la
复制链接

扫一扫