聖盃佈局和雙飛翼佈局

時間 2019-11-16

標籤佈局雙飛简体版

原文原文鏈接

聖盃佈局：css

經過float->負外邊距->父元素padding->相對定位position:relative->相對移動實現。html

上代碼：佈局

<!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>

效果：學習

雙飛翼佈局：spa

爲main加一個額外的包含標籤main-wrap，而後：float->負外邊距->.main-wrap{margin:......}。code

還能夠實現列的任意佈局，不用考慮標籤順序，實現了內容與表現解耦。試了下，響應式更好。htm

代碼：blog

<!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:ip

正常的語句或漢字均可以自動換行，可是，連續的英文字母或數字會把容器撐大，而不會自動換行，想要讓它自動換行，添加如下幾句css：utf-8

word-wrap:break-word;
word-break:break-all;

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。