圣杯布局和双飞翼布局

m0_49471668

已于 2022-04-04 22:34:48 修改

阅读量105

点赞数

分类专栏： js 文章标签： javascript

于 2022-03-22 22:32:58 首次发布

本文链接：https://blog.csdn.net/m0_49471668/article/details/123672574

版权

js 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

圣杯布局

双飞翼布局

参考：圣杯布局和双飞翼布局的理解与思考 - 简书

圣杯布局和双飞翼布局的作用和区别 - 暖风叔叔 - 博客园

圣杯布局

一般用于PC端的网页布局

目的：1.两侧内容宽度固定，中间宽度自适应

2.三栏布局，中间内容最先加载，渲染出来

使用方法：float和margin

margin给负值的意思是宽度缩减多少

注意点：1.footer清除浮动 2.margin负值的使用 3.posotion:relative的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            min-width: 500px;
        }
        div{
            text-align: center;
        }
        #header{
            background-color:#eee
        }
        #content{
            padding-left: 300px;
            padding-right: 200px;
        }
        #content #center{
            background-color:#595959;
            width:100%
        }

        #content #right{
            background-color:green;
            width: 200px;
            margin-right: -200px;
        }
        #content #left{
            position: relative;
            background-color:indianred;
            width: 300px;
            margin-left: -100%;
            right: 300px;
        }
        #footer{
            /*清除浮动*/
            clear:both;
            background-color:#595959;
        }
        #content .column{
            float: left;
        }
    </style>
</head>
<body>
<h1>实现圣杯布局</h1>
<div id="header">Header</div>
<div id="content">
    <div id="center" class="column">Center</div>
    <div id="left" class="column">left</div>
    <div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>

双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #main{
            background-color: #dddddd;
            width: 100%;
        }
        #main #main-wrapper{
            margin-left: 100px;
            margin-right: 50px;
        }
        #left{
            margin-left: -100%;
            background-color: #1890FF;
            width: 100px;
        }
        #right{
            /*  margin-left 向左拖拽*/
            margin-left: -50px;
            background-color: #E74405;
            width: 50px;
        }
        .column{
            float: left;
        }
    </style>
</head>
<body>
<h1>双飞翼布局</h1>
<div id="main" class="column">
    <div id="main-wrapper">Main</div>
</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</body>
</html>

m0_49471668

关注

0
点赞
踩
0

收藏

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

一般用于PC端的网页布局目的：1.两侧内容宽度固定，中间宽度自适应2.三栏布局，中间内容最先加载，渲染出来使用方法：float和marginmargin给负值的意思是宽度缩减多少注意点：1.footer清除浮动 2.margin负值的使用 3.posotion:relative的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t.
复制链接

扫一扫