雙飛翼佈局和聖盃佈局

時間 2019-11-26

標籤雙飛佈局简体版

原文原文鏈接

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8"/>
 5 <title>雙飛翼</title>
 6 <style>
 7     div {
 8         min-height: 300px;
 9         display:block;
10     }
11     .div {
12         width: 100%;
13         background-color: blue;
14         margin:0 auto;
15     }
16     .main {
17         width:100%;
18         background:red;
19         float:left;　　　　　　/* 先定主體 */
20     }
21     .left {
22         float:left;
23         background:yellow;
24         margin-left:-100%;　　/* 關鍵！ 肯定左邊翅膀 */
25         width:300px;
26     }
27     .right {
28         float:left;
29         background: yellow;
30         width: 200px;
31         margin-left:-200px;　　/* 關鍵！ 肯定右邊翅膀 */
32     }
33     .mainframe {  　　　　　　　/* 關鍵！ 因主體被擋住，所以須要 兩邊留出空白，把主體內容聚在中間集中顯示 */
34         margin-left: 300px;
35         margin-right: 200px;  
36     }
37 </style>
38 </head>
39 <body>
40     <div class="div">
41         <div class="main">
42             <div class="mainframe">
43                 這是主體內容這是主體內容這是主體內容這是主體內容這是主體內容這是主體內容
44             </div>
45         </div>
46         <div class="left">這是左邊內容</div>
47         <div class="right">這是右邊內容</div>
48     </div>
49 </body>
50 </html>

雙飛翼佈局的思路是html

　　先把整個佈局的「主體」肯定好瀏覽器

　　而後再肯定「翅膀」的位置框架

　　最後根據「翅膀」的大小，給「主體」部分兩邊留白。佈局

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>聖盃</title>
<style>
	div {
		min-height: 300px;
		display: block;
	}
	.div {
		margin: 0 auto;
		padding: 0 200px 0 300px;　　/* 防止左右兩邊擋住內容 */
	}
	.main,.left,.right {
		float: left;
		position: relative;　　　　　　/* 後面須要用到 left */
	}
	.main {
		width:100%;
		background-color: red;
	}
	.left {
		width: 300px;
		background-color: yellow;
		margin-left: -100%;　　　　　　/* 移動到主體的左邊部分 */
		left: -300px;　　　　　　　　　　/* 使用相對定位, 將左邊部分移動到父框架的 左邊 padding 部分 */
	}
	.right {
		width: 200px;
		background-color: yellow;
		margin-left: -200px;　　　　　　/* 移動到主體的右邊部分 */
		right: -200px;　　　　　　　　　　/* 使用相對定位，講右邊部分移動到父框架的 右邊 padding 部分 */

	}
</style>
</head>
<body>
	<div class="div">
		<div class="main">
			這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子這是一個很長的句子
		</div>
		<div class="left">這是左邊內容</div>
		<div class="right">這是右邊內容</div>
	</div>
</body>
</html>

聖盃佈局的思路是spa

　　先左右兩邊框利用 margin-left 移動到相應的位置code

　　而後利用主體的padding 部分給左右兩邊框留白htm

　　接着左右兩邊框利用 relative 的 left 和 right 移動到留白的部分blog

雙飛翼佈局和聖盃佈局的優勢在於utf-8

　　一、自適應佈局，兩邊的寬度肯定好後，主體部分能夠隨着窗口的變化而變化文檔

　　二、主體部分在 HTML文檔裏在「翅膀」部分的前面，瀏覽器會優先加載重要的主體部分，加載完畢再去加載次要部分。

二者都採用了 margin-left 來定位左右邊框，只是對主體的遮擋部分處理的方式不同。

雙飛翼佈局是採用了添加一個子框架,而後利用子框架的 margin-left 和margin-right 將內容從遮擋處移出來；

而聖盃佈局則採用了主體部分的 padding ,利用該屬性給兩邊留白,而後左右部分則採用 relative 的left 和right 移出主體部分,

移到主體部分的 padding區域。