聖杯布局and雙飛翼布局
阿新 • • 發佈：2017-05-06
content 尺寸 元素 不一定 oot alt ctype 間距 mar
*聖杯布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
<style>
*{
padding:0;
margin:0
}
.header{
width:100%;
background:#e1ef05;
height:50px;
}
效果截圖
*雙飛翼布局
<!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>
效果截圖
總結
從實現結果看：聖杯布局與雙飛翼布局都是左右固定，中間自適應。
從代碼上看：雙飛翼布局是通過中間多加一個div,從而減少了不必要的相對定位來控制。
聖杯布局and雙飛翼布局