zoukankan      html  css  js  c++  java
  • 圣杯布局和双飞翼布局

    圣杯布局:

    通过float->负外边距->父元素padding->相对定位position:relative->相对移动  实现。

    上代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>圣杯布局</title>
        <style>
            header,footer{
                width:100%;
                background-color: black;
                color:white;
                text-align:center;
            }
            header{
                height:30px;
            }
            .main,.left,.right{
                float:left;
                min-height: 300px;/*超出300就不一样齐了,怎么办?等高列布局有待学习*/
            }
            .left,.right{
                position:relative;
            }
            .main{
                width:100%;
                background-color: #ccc;
            }
            .left{
                width:200px;
                margin-left:-100%;
                background-color: #0c0;
                left:-200px;
            }
            .right{
                width:300px;
                margin-left:-300px;
                background-color: #cc0;
                right:-300px;
            }
            .bd{
                padding:0 300px 0 200px;
            }
            footer{
                height:50px;
                clear:both;
            }
        </style>
    </head>
    <body>
        <header>
            header
        </header>
        <section class="bd">
            <div class="main">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>
            <div class="left">sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub susub >sub sub sub >subub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub s</div>
            <div class="right">extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra </div>
        </section>
        <footer>
            footer
        </footer>
    </body>
    </html>

    效果:

    双飞翼布局:

    为main加一个额外的包含标签main-wrap,然后:float->负外边距->.main-wrap{margin:......}。

    还可以实现列的任意布局,不用考虑标签顺序,实现了内容与表现解耦。试了下,响应式更好。

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>双飞翼</title>
        <style>
            header,footer{
                width:100%;
                background-color: black;
                color:white;
                text-align:center;
            }
            header{
                height:30px;
            }
            .main,.left,.right{
                float:left;
                min-height: 300px;/*超出300就不一样齐了,怎么办?等高列布局有待学习*/
            }
            .main{
                width:100%;
                background-color: #ccc;
            }
            .left{
                width:200px;
                margin-left:-100%;
                background-color: #0c0;
            }
            .right{
                width:300px;
                margin-left:-300px;
                background-color: #cc0;
            }
            .main-wrap{
                margin:0 300px 0 200px;
            }
            footer{
                height:50px;
                clear:both;
            }
        </style>
    </head>
    <body>
        <header>
            header
        </header>
        <section class="bd">
            <div class="main">
                <div class="main-wrap">主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容主要内容</div>
            </div>
            <div class="left">sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub susub >sub sub sub >subub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub sub >sub sub s</div>
            <div class="right">extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra extra </div>
        </section>
        <footer>
            footer
        </footer>
    </body>
    </html>

    tip:

    正常的语句或汉字都可以自动换行,但是,连续的英文字母或数字会把容器撑大,而不会自动换行,想要让它自动换行,添加以下几句css:

    word-wrap:break-word;
    word-break:break-all;
  • 相关阅读:
    124. 二叉树中的最大路径和
    快速排序,归并排序
    剑指offer ——重建二叉树
    共享指针的简单实现
    string_自定义
    幸运的袋子
    动态规划——出差问题
    计算数组平均值
    时间格式化并算差值
    适配器模式
  • 原文地址:https://www.cnblogs.com/babywhale/p/4432403.html
Copyright © 2011-2022 走看看