本身對於聖盃佈局和雙飛翼佈局的一些理解

時間 2019-11-09

標籤本身對於佈局雙飛一些理解简体版

原文原文鏈接

首先聖盃佈局和雙飛翼佈局的差別體如今都是想給左右浮動空出位置。html

那麼就只有兩條路能夠走：
1:用padding的方法 padding:0 100px;佈局

2.用margin的方法 margin:0 100px;spa

用第一種方法走到底就是聖盃佈局，用第二種方法走到底就是雙飛翼佈局。，code

第一種方法代碼以下htm

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聖盃佈局</title>
    <style>
    .header,.footer{
        height:100px;
        width:100%;
        background:red;
        clear:both;
    }
    .content{
        padding:0 200px;
        overflow: auto;
    }
    .main{
        width:100%;
        float:left;
        height:100px;
        background:yellow;

    }
    .left{
        width:200px;
        height:100px;
        background:pink;
        float:left;
        margin-left:-100%;
        position: relative;
        left:-200px;

    }
    .right{
        width:200px;
        height:100px;
        background:green;
        float:left;
        margin-left:-200px;
        position: relative;
        left:200px;
    }
    </style>
</head>
<body>
    <div>
        <div class="header">
            頭部
        </div>
        <div class="content">
            <div class="main">中間部分。</div>
            <div class="left">左側邊欄</div>
            <div class="right">右側邊欄</div>
        </div>
        <div class="footer">
            頁腳
        </div>
    </div>
</body>
</html>

效果圖：
聖盃佈局要注意的是：main中間部分須要放在第一個加載。另外中間部分寬度爲100%撐滿正行，左右側邊欄利用負margin上來。最後用position：relative將左右兩側邊欄移到兩邊。blog

雙飛翼佈局it

代碼以下：io

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>雙飛翼佈局</title>
	<style>
	.header,.footer{
		height:100px;
		width:100%;
		background:red;
		clear:both;
	}
	.main_link{
		width:100%;
		height:100px;
		background:yellow;
		float:left;
	}
	.main{
		margin:0 200px;
	}
	.left{
		width:200px;
		height:100px;
		background:pink;
		float:left;
		margin-left:-100%;


	}
	.right{
		width:200px;
		height:100px;
		background:green;
		float:left;
		margin-left:-200px;

	}
	</style>
</head>
<body>
	<div class="header">頭部</div>
	<div class="content">
		<div class="main_link">
		<div class="main">中間部分</div>
		</div>
		<div class="left">左側邊欄</div>
		<div class="right">右側邊欄</div>
	</div>
	<div class="footer">頁腳</div>
</body>
</html>

雙飛翼的佈局感受思路就是。若是左右兩側邊欄要和我main搶位置?那我爲何不直接空出來位置好了。不和大家搶了。
就給main加個div。讓這個div寬度取100% 和left和right浮動起來，而後main取一個margin：0 200px;把左右側邊欄的的位置給空出來不就好了麼？class

而後用負margin 讓left和right移動上去。meta

相關標籤/搜索

每日一句

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