聖盃佈局and雙飛翼佈局

時間 2019-11-16

標籤佈局雙飛简体版

原文原文鏈接

*聖盃佈局html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
    <style>
        *{
            padding:0;
            margin:0
        }
        .header{
            width:100%;
            background:#e1ef05;
            height:50px;
            }
        /*main寫前目的是讓它先加載*/
        .main{
           padding:0 250px;
        }
        .content{
            background: #D6D6D6;
            width:100%;
            float:left;
        }
        .left{
            background:#0c9;
            width:250px;
            height: 100px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-250px;
        }
        .right{
            background:#0c9;
            width:250px;
            height: 100px;
            float:left;
            margin-left:-250px;
            position:relative;
            right:-250px;
        }
        .footer{
            width:100%;
            height:50px;
            background: #ccc;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="header">Header</div>
    <div class="main">
        <div class="content">
            在設計師的做品集頁面中，你能夠發現各類各樣自定義的柵格佈局。自定義柵格展現內容的優點在於，它能夠同時呈現大量的視覺化的內容，看起來足夠豐富又不會落於下乘。下面這個圖庫的效果看起來就至關震撼。在柵格中填充色彩，還能夠用來承載文字內容。不一樣的區塊之間不必定非要用線條進行分割，可供選擇的方案有不少，不過千萬要控制好柵格尺寸和間距。控制很差的細節，整個設計的平衡感可能會被破壞。 原理：柵格的優點在於它的組織性，對於用戶而言，它具備規律性和可預期性。一個漂亮的柵格系統可以讓用戶更快找到須要的內容，在視覺上也更加協調天然。，在視覺上也更加協調天然。相關趨勢：柵格很容易被人視爲卡片這樣的元素，能夠爲其加入翻轉等各式各樣的動效，呈現出更多的信息和視覺層原理：柵格的優點在於它的組織性，對於用戶而言，它具備規律性和可預期性。一個漂亮的柵格
        </div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

效果截圖ajax

*雙飛翼佈局佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ajax</title>
    <style>
        *{
            padding:0;
            margin:0
        }
        .header{
            width:100%;
            background:#e1ef05;
            height:50px;
            }
        /*main寫前目的是讓它先加載*/
        .main{
           padding:0 250px;
        }
        .content{
            background: #D6D6D6;
            width:100%;
            float:left;
        }
        .left{
            background:#0c9;
            width:250px;
            height: 100px;
            float:left;
            margin-left:-100%;
            position: relative;
            left:-250px;
        }
        .right{
            background:#0c9;
            width:250px;
            height: 100px;
            float:left;
            margin-left:-250px;
            position:relative;
            right:-250px;
        }
        .footer{
            width:100%;
            height:50px;
            background: #ccc;
            clear:both;
        }
    </style>
</head>
<body>
    <div class="header">Header</div>
    <div class="main">
        <div class="content">
            在設計師的做品集頁面中，你能夠發現各類各樣自定義的柵格佈局。自定義柵格展現內容的優點在於，它能夠同時呈現大量的視覺化的內容，看起來足夠豐富又不會落於下乘。下面這個圖庫的效果看起來就至關震撼。在柵格中填充色彩，還能夠用來承載文字內容。不一樣的區塊之間不必定非要用線條進行分割，可供選擇的方案有不少，不過千萬要控制好柵格尺寸和間距。控制很差的細節，整個設計的平衡感可能會被破壞。 原理：柵格的優點在於它的組織性，對於用戶而言，它具備規律性和可預期性。一個漂亮的柵格系統可以讓用戶更快找到須要的內容，在視覺上也更加協調天然。，在視覺上也更加協調天然。相關趨勢：柵格很容易被人視爲卡片這樣的元素，能夠爲其加入翻轉等各式各樣的動效，呈現出更多的信息和視覺層原理：柵格的優點在於它的組織性，對於用戶而言，它具備規律性和可預期性。一個漂亮的柵格
        </div>
        <div class="left">Left</div>
        <div class="right">Right</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

效果截圖spa

總結設計

從實現結果看：聖盃佈局與雙飛翼佈局都是左右固定，中間自適應。code

從代碼上看：雙飛翼佈局是經過中間多加一個div,從而減小了沒必要要的相對定位來控制。htm

相關標籤/搜索

每日一句

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