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

圣杯布局:

<!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 条评论
登录 后参与评论

相关文章

来自专栏Flutter入门

Android OpenGL ES(八) - 简单实现绿幕抠图

这里的关键是,判断颜色的范围。这里简单的认定 g>140.0 && r<128.0 && b<128.0 时为绿色。当是绿色的时候,就将其颜色换成白色。同时al...

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

Flexbox 布局的最简单表单

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

792
来自专栏前端知识分享

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

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

791
来自专栏九彩拼盘的叨叨叨

学习前端 第4周 第1天

743
来自专栏IT大咖说

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

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

2273
来自专栏Android干货园

Android带你解析ScrollView--仿QQ空间标题栏渐变

版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/52...

1841
来自专栏前端小叙

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

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

2815
来自专栏前端学习心得

如何实现CSS布局

1659
来自专栏Android先生

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

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

1362
来自专栏cnblogs

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

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

2348

扫码关注云+社区