双飞翼布局的实现代码和思路

最新推荐文章于 2023-05-17 17:19:37 发布

斑码大前端

最新推荐文章于 2023-05-17 17:19:37 发布

阅读量170

点赞数

文章标签： css css3 html html5 web

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

版权

<!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;
        }
        
        .left {
            width: 250px;
            height: 400px;
            background-color: rgb(190, 147, 66);
            font-size: 30px;
            float: left;
            margin-left: -100%;
        }
        .right {
            width: 200px;
            height: 400px;
            background-color: rgb(17, 153, 153);
            font-size: 30px;
            text-align: center;
            float: left;
            margin-left: -200px;
        }
        .content {
            background-color: pink;
            color: blue;
            /* 向左浮动 */
            float: left;
        }
        .box {
            margin-left: 250px;
            margin-right: 200px;
        }


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

双飞翼布局实现的思路：

主体内容在左右侧边栏之上
三个部分向左浮动
左边栏的margin-left: -100%;
右边栏的margin-left: - 右边栏的宽度
此时主体内容被左右边栏遮盖着一部分，区别于圣杯布局的写法，不再设置父元素的padding，而是在内容和主体内容和容器之间增加一层新的dom结构
设置新增加的dom的margin-left为左边栏的宽度，设置margin-right为右边栏的宽度

圣杯布局与双飞翼布局的比较：

双飞翼布局在圣杯布局的基础上，使用新增加的dom结构的margin取代父元素设置的padding。双飞翼布局无需设置左右边栏的定位。

课件、答疑QQ群：1103015245

视频讲解

斑码大前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
双飞翼布局的实现代码和思路

<!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> * { ma
复制链接

扫一扫