第六周双飞翼布局和圣杯布局学习

最新推荐文章于 2023-08-31 18:13:34 发布

snail131

最新推荐文章于 2023-08-31 18:13:34 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/qq_36807080/article/details/70785010

版权

一、双飞翼布局的优点

1、中间栏要在浏览器中优先展示渲染。

2、三列布局，中间宽度自适应，两边定宽。

3、兼容性好，兼容所有主流浏览器，包括被人诟病的ie6

二、方法

圣杯布局和双飞翼布局解决问题思路基本相同，不同点在于处理中间部分被遮挡的问题上。个人认为双飞翼布局更加简便。

1.首先是三列布局的实现

设置center、left、right三个div放在父div——box中

三个子div都设置为浮动，center宽度width设为100%，left设置width设置成150px。right为190px。

这时center在上，left和right在下。而设置负值的margin会让left和right上移，形成简单的三列布局，

但是有个问题，center的内容会被left和right遮挡住

在解决这个问题上形成了圣杯布局和双飞翼布局

1.圣杯布局

给box添加内边距padding，但是left和right都移动了，

于是采用相对定位的方法把自己移出center，解决问题

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        *{
            padding:0;
            margin:0;
        }
        .header,.footer{
            width:100%;
            background: darkcyan;
            height:60px;
            clear:both;
        }
        .box{
            padding-left:150px;
            padding-right:190px;
        }
        .left{
            background: greenyellow;
            width:150px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-150px;
        }
        .center{
            background: yellow;
            width:100%;
            float:left;

        }
        .right{
            height:100%;
            background: red;
            width:190px;
            float:left;
            margin-left:-190px;
            position:relative;
            right:-190px;
        }
    </style>
    <title> 圣杯布局</title>
</head>
<!--保证主布局优先加载-->
<body>
<div class="header">Header</div>
<div class="box">
    <div class="center">center</div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>
</body>
</html>

2.双飞翼布局

在center中设置子div——mian

再给mian设置合适的margi值

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .header, .footer {
            width: 100%;
            background: darkcyan;
            height: 60px;
            clear: both;
        }

        .box {
            width: 100%;
            height: auto;
        }

        .left {
            height: auto;
            background: greenyellow;
            width: 150px;
            float: left;
            margin-left: -100%;
        }

        .center {
            background: yellow;
            width: 100%;
            height: auto;
            float: left;
            /*padding-left: 150px;*/
            /*padding-right: 190px;*/
        }

        .main {
            height: auto;
            width: 100%;
            margin-left: 150px;
            margin-right: 190px;
        }

        .right {
            height: auto;
            background: red;
            width: 190px;
            float: left;
            margin-left: -190px;

        }
    </style>
    <title> 双飞翼布局</title>
</head>
<!--保证主布局优先加载-->
<body>
<div class="header">Header</div>
<div class="box">
    <div class="center">
        <div class="main">mian</div>
    </div>
    <div class="left">Left</div>
    <div class="right">Right
    </div>
</div>
<div class="footer">Footer</div>
</body>
</html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

然后这两位大神写的比较详细可以去看看

圣杯布局http://blog.csdn.net/u014346301/article/details/53385170?locationNum=8&fps=1

双飞翼布局http://blog.csdn.net/fivemeat/article/details/48709767?locationNum=3&fps=1

snail131

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六周双飞翼布局和圣杯布局学习

一、双飞翼布局的优点1、中间栏要在浏览器中优先展示渲染。2、三列布局，中间宽度自适应，两边定宽。3、兼容性好，兼容所有主流浏览器，包括被人诟病的ie6二、方法圣杯布局和双飞翼布局解决问题思路基本相同，不同点在于处理中间部分被遮挡的问题上。个人认为双飞翼布局更加简便。1.首先是三列布局的实现设置center、left、right三个div放在父div——box
复制链接

扫一扫