likes
comments
collection
share

你是会突出重点的——三栏布局

作者站长头像
站长
· 阅读数 7

当一个页面把能接的广告都接了，各种花花绿绿的小窗口在两边，作为老板，会招一个怎么样的程序员，让设计的页面，能兼顾用户体验和搞钱呢？没错！就是会三栏布局的程序员，哈哈哈哈哈......

一、效果图展示

你是会突出重点的——三栏布局

当我们看到这样的一个布局时，首先想的是结构——左右结构，然后三个div，调整一下宽高就很简单的实现了。

<!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;
        }
        .page{
            height: 200px;
            font-size: 0;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: green;
        }
        .content{
            height: 200px;
            background-color: yellow;
            width: calc(100vw - 400px);
        }
        .page div{
            display: inline-block;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="left">广告位</div>
        <div class="content">主要内容</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

  • 但是这样的话，DOM元素是从上往下加载、渲染的，游览器会先加载广告位，然后加载主要内容，一旦广告一多，用户就不能及时地看到需要的内容，极大地降低了用户体验，违背了前端的使命，这种事我可不干!

  • 那么如何解决呢？很简单，把主要内容放到广告位前面，这就解决了加载的问题，布局问题呢？这就是接下来我们要聊一聊的啦。

我们先给出简单的html和style，设置了一些元素以及宽高背景图，便于我们观察效果。避免后面代码冗余，接下来的布局只给出style代码。

<!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;
        }
        .page{
            height: 200px;
            font-size: 0;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: green;
        }
        .content{
            height: 200px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">主要内容</div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
</body>
</html>

二、三栏布局

1、圣杯布局

        .page{
            padding: 0 200px;
        }
        .page div{
            float: left;
        }
        .content{
            width: 100%;
        }
        .left{
            margin-left: -200px;
            position: relative;
            left: -100%;
        }
        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
  • 设置了page的内边距，给两个广告位预留了位置。
  • 设置div的浮动float:left;脱离文本流，一行显示
  • content:100%自适应了剩余的空间
    • 左边栏left的margin-left设置为-200px，这会使其向左移动200像素，正好抵消了page容器的200px内边距。
    • position: relative和left: -100%则是为了让左边栏在page容器的左边界内显示，即从页面的最左边开始，但被margin-left向左推移了200px。
    • 右边栏right的margin-left同样是-200px，这也会使其向左移动200像素。
    • position: relative和right: -200px的组合则是为了让右边栏在page容器的右边界内显示，即从页面的最右边开始，但被margin-left向左推移了200px。 圣杯布局的核心在于通过负边距和相对定位，解决了左右边栏的固定宽度和中间栏的自适应宽度。

注： 值得一提的是float:left是通过左向右浮动实现一行显示，当超出屏幕宽度时才会换行。这样你就会理解当设置margin-left: -200px;广告位会跑去上一行的原因了。

你是会突出重点的——三栏布局

2、双飞翼布局

        .inner{
            height: 100%;
            margin: 0 200px;
        }
        .page>div{
            float: left;
        }
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }

这里的html有所变化.....

    <div class="page">
        <div class="content">
            <div class="inner">主要内容</div>
        </div>
        <div class="left">广告位</div>
        <div class="right">广告位</div>
    </div>
  • inner设置了左右各200px的外边距，这样就为左右两栏预留了空间。
  • 设置page下的div浮动
  • margin-left: -100%; 让左广告向左移动其自身宽度的距离，即200px，这样它就会被定位在页面的最左侧。
  • margin-left: -200px; 让右广告向左移动200px，但由于左侧栏的存在，右侧栏实际上会定位在页面的最右侧。

这两种布局(圣杯布局、双飞翼布局)一个是利用了padding，另一个则是margin，来实现三栏布局的效果。

三、弹性布局

        }
        .page{
            display: flex;
        }
        .content{
            flex: 1;
            order: 1;
        }
        .right{
            order: 2;
        }
  • 作为现在最受欢迎的布局方法之一，flex布局是最为快捷方便实现三栏布局的方法。
  • flex: 1;表示中间栏将占据剩余空间的全部比例，从而实现自适应宽度。order: 1;用于控制子元素在Flex容器中的排序，数值越小越靠前。

这三种方法实现的三栏布局都做到了优先加载主要内容的目的，接下来还有几种方法能实现三栏布局，但是无法做到优先加载主要内容。参考代码如下......

  • html
    <div class="page">
        <!-- <div class="content">主要内容</div> -->
        <div class="left">广告位</div>
        <div class="content">主要内容</div>
        <div class="right">广告位</div>
    </div>
  • table布局
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
        }
        .content{
            height: 200px;
            background-color: yellow;
        }
        .page{
            width: 100vw;
            display: table;
            table-layout: fixed;
        }
        .page>div{
            display: table-cell;
        }
        .content{
            width: 100%;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: green;
        }
  • 网格布局
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .page{
            height: 200px;
        }
        .left,.right{
            height: 200px;
            width: 200px;
            background-color: green;
        }
        .content{
            height: 200px;
            background-color: yellow;
        }
        .page{
            display: grid;
            grid-template-columns: 200px auto 200px;
        }
    </style>

今天的分享就到这啦！

转载自:https://juejin.cn/post/7385374015542067235
评论
请登录