负边距的用处,圣杯布局,双飞翼布局

前台页面的开发属于前端吗|小红书社招面试题 前端开发|前端开发的面试的自我介绍

写下几个经典的布局圣杯布局,先渲染center区域,再渲染left区域,最后渲染right区域

代码片段 1

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            padding: 0 200px 0 150px;
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            float: left;
            width: 100%;
            background: #F90;
        }
        .wrapper .left {
            float: left;
            margin-left: -100%;
            width: 150px;
            position: relative;
            left: -150px;
            background: #6C0;
        }
        .wrapper .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            position: relative;
            right: -200px;
            background: #F9F;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”center”>
            <p>main-wrap</p>
            <p>main-wrap</p>
        </div>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
    </div>
</body>
</html>

双飞翼布局,先渲染center区域,再渲染left区域,最后渲染right区域。相比圣杯布局,center区域多了一个标签

代码片段 2

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            float: left;
            width: 100%;
            background: #F90;
        }
        .wrapper .center-wrapper {
            margin: 0 200px 0 150px;
        }
        .wrapper .left {
            float: left;
            margin-left: -100%;
            width: 150px;
            background: #6C0;
        }
        .wrapper .right {
            float: left;
            margin-left: -200px;
            width: 200px;
            background: #F9F;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”center”>
            <div class=”center-wrapper”>
                <p>main-wrap</p>
                <p>main-wrap</p>
            </div>
        </div>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
    </div>
</body>
</html>

用普通的float实现圣杯布局和双飞翼布局的效果,只是先渲染left区域,再渲染right区域,最后渲染center区域

代码片段 3

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            width: 100%;
            background: #F90;
        }
        .wrapper .center-wrapper {
            margin: 0 200px 0 150px;
        }
        .wrapper .left {
            float: left;
            width: 150px;
            background: #6C0;
        }
        .wrapper .right {
            float: right;
            width: 200px;
            background: #F9F;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
        <div class=”center”>
            <div class=”center-wrapper”>
                <p>main-wrap</p>
                <p>main-wrap</p>
            </div>
        </div>
    </div>
</body>
</html>

这里附个等高“效果”(实际上并不是真正意义的等高)的用法,用普通的float实现圣杯布局和双飞翼布局的效果

代码片段 4

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0px;
        }
        .wrapper {
            border: 1px solid black;
            overflow: hidden;
        }
        .wrapper .center {
            width: 100%;
            background: #F90;
        }
        .wrapper .center-wrapper {
            margin: 0 200px 0 150px;
        }
        .wrapper .left {
            float: left;
            width: 150px;
            background: #6C0;
        }
        .wrapper .right {
            float: right;
            width: 200px;
            background: #F9F;
        }
        .wrapper .left,
        .wrapper .center,
        .wrapper .right {
            padding-bottom: 2000px;
            margin-bottom: -2000px;
        }
    </style>
</head>
<body>
    <div class=”wrapper”>
        <div class=”left”>
            <p>sub</p>
            <p>sub</p>
            <p>sub</p>
        </div>
        <div class=”right”>
            <p>extra</p>
            <p>margin-left:350px; background:#CC0;margin-left:350px; background:#CC0;</p>
        </div>
        <div class=”center”>
            <div class=”center-wrapper”>
                <p>main-wrap</p>
                <p>main-wrap</p>
            </div>
        </div>
    </div>
</body>
</html>

页面前端开发与设计的区别吗|web前端开发面试题 校招|web前端常用开发软件下载

» 本文来自:前端开发者 » 《负边距的用处,圣杯布局,双飞翼布局》
» 本文链接地址:https://www.rokub.com/5229.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!