圣杯布局,双飞翼布局,和自己独创的布局

圣杯布局:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            min-width: 600px;
        }
        header,
        footer {
            text-align: center;
            width: 100%;
            background-color: #bbbbbb;
        }
        .text {
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: #fff;
        }
        .bd {
            overflow: hidden;
            padding: 0 200px 0 200px;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: #ddd;
        }
        .left {
            /* opacity: 0.5; */
            float: left;
            width: 200px;
            height: 200px;
            background-color: #da4242;
            /* 产生布局效果的属性 */
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right {
            /* opacity: 0.5; */
            float: left;
            width: 200px;
            height: 200px;
            background-color: #4ddef1;
            /* 产生布局效果的属性 */
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>

<body>
    <header>圣杯布局</header>
    <div class="bd">
        <div class="main text">
            main
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>
</body>

</html>

其实是利用了,position:relative;和margin属性进行位置移动;结构上也是三栏

双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        header,
        footer {
            text-align: center;
            width: 100%;
            background-color: #bbbbbb;
        }
        .text {
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: #fff;
        }
        .bd {
            overflow: hidden;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: #ddd;
        }
        .main-content {
            margin: 0 200px;
        }
        .left {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #da4242;
            /* 产生布局效果的属性 */
            margin-left: -100%;
        }
        .right {
            float: left;
            width: 200px;
            height: 200px;
            background-color: #4ddef1;
            /* 产生布局效果的属性 */
            margin-left: -200px;
        }
    </style>
</head>

<body>
    <header>双飞翼布局</header>
    <div class="bd">
        <div class="main text">
            <div class="main-content">main</div>
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>
</body>

</html>

双飞翼布局,利用了,margin的负边距属性移动,这里要注意由于是浮动所以,margin是负边距时能够移动,当不是浮动时,负边距会吃点元素本身的宽度

他与圣杯最大的区别在于没有用到position属性,html结构上也有区别,主要在main那一块,一个是做padding,一个是做margin

无论哪种布局都利用了一个很重要的属性,内部元素的宽度百分比是相对于外部元素的content宽度的,即不包括内外边距,也不包括边框。

我的布局方式,感觉比之前两种都简单,嘿嘿

上代码:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            min-width: 600px;
        }
        header,
        footer {
            text-align: center;
            width: 100%;
            background-color: #bbbbbb;
        }
        .text {
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            color: #fff;
        }
        .bd {
            overflow: hidden;
            position:relative;
            padding: 0 200px 0 200px;
        }
        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: #ddd;
        }
        .left {
            /* opacity: 0.5; */
            width: 200px;
            height: 200px;
            background-color: #da4242; 
            position:absolute;
            left:0;
            top:0;
        }
        .right {
            /* opacity: 0.5; */
            width: 200px;
            height: 200px;
            background-color: #4ddef1;
            position:absolute;
            right:0;
            top:0;
        }
    </style>
</head>

<body>
    <header>三栏布局</header>
    <div class="bd">
        <div class="main text">
            main
        </div>
        <div class="left text">
            left
        </div>
        <div class="right text">
            right
        </div>
    </div>
    <footer>footer</footer>
</body>

</html>

我利用了position:absolute这个属性,外层元素的padding设置一下,其实准确的说,float没哟脱离文档流,只是,float使这个元素快在文档流里能根据float规则流动;absolute才完全脱离了文档流。相对于relative的父元素位置。并且,absolute的原来的位置没有了,relative的原来位置还在。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏DannyHoo的专栏

ios7之后导航栏的问题1

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

10620
来自专栏前端技术总结

实例详解:Flex布局(二)

在之前的一篇文章:详解CSS的Flex布局中介绍了CSS的Flex布局的基本知识,包括flex-container的6个属性,以及flex-item的6个属性。...

1.4K420
来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

12620
来自专栏Android先生

android自定义view(自定义数字键盘)

至此,我们写的差不多了,然后就是要提供一个接口,对外开放,方便用的时候调用,获取到数字或者其他信息:

18020
来自专栏前端知识分享

第4天:JS入门-给div设置宽高背景色

今天学习了js入门课程,听的不多,做了个小练习,给div设置宽高、背景色。一点点都是进步。核心代码如下:

10410
来自专栏IT大咖说

分享7款超赞的CSS3动画效果,值得你收藏!

今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。

41530
来自专栏cnblogs

双飞翼布局的改造 box-sizing和margin负值的应用

box-sizing + margin负值 升级双飞翼布局 一、box-sizing属性 ? .content-size, .border-size{ ...

25180
来自专栏前端知识分享

第181天:HTML5——视频、音频

11810
来自专栏阮一峰的网络日志

Flexbox 布局的最简单表单

弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

11020
来自专栏前端小叙

ul li列表元素浮动导致border没有底边解决办法

如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给...

31450

扫码关注云+社区

领取腾讯云代金券