css佈局：雙飛翼佈局與聖盃佈局
今天開班級會議，主要是講講畢業的事宜，其中一位同學說到他現在在專研一些新技術，但是我不建議他這麼做，畢竟基礎很重要程式設計主要學習的是思想
正題吧，前陣子朋友面試，有這麼一個要求：
就是兩邊定寬，中間自適應的三欄佈局
是不是感覺很簡單，但是我事後試了試，發現不是那麼簡單，於是百度，發現了這麼兩個佈局：雙飛翼佈局還有聖盃佈局，兩者具體的實現效果都是一樣
兩個都是通過設定margin以及浮動來實現的，唯一的區別應該說是一個是通過大巢狀小來實現居中的，直接上程式碼吧
聖盃佈局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聖盃佈局</title>
<link rel="stylesheet" href="layout1.css" />
</head>
<body>
<div id="hd">header</div>
<div id="bd">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>
css檔案：
#hd{
height:50px;
background: #666;
text-align: center;
}
#bd{
padding:0 200px 0 180px;
height:100px;
}
#middle{
float:left;
width:100%;/*左欄上去到第一行*/
height:100px;
background:blue;
}
#left{
float:left;
width:180px;
height:100px;
margin-left:-100%;
background:#0c9;
position:relative;
left:-180px;
}
#right{
float:left;
width:200px;
height:100px;
margin-left:-200px;
background:#0c9;
position:relative;
right:-200px;
}
#footer{
height:50px;
background: #666;
text-align: center;
}
下面是雙飛翼佈局：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>雙飛翼佈局</title>
<link rel="stylesheet" href="layout2.css" />
</head>
<body>
<div id="hd">header</div>
<div id="middle">
<div id="inside">middle</div>
</div>
<div id="right">right</div>
<div id="left">left</div>
<div id="footer">footer</div>
</body>
</html>
css檔案：
#hd {
height: 50px;
background: #666;
text-align: center;
}
#middle {
float: left;
width: 100%;
height: 100px;
background: blue;
}
#left {
float: left;
width: 200px;
height: 100px;
margin-left: -100%;
background: #0c9;
}
#right {
float: left;
width: 200px;
height: 100px;
margin-left: -200px;
background: #0c9;
}
#inside {
margin: 0 200px 0 200px;
height: 100px;
}
#footer {
clear: both;
height: 50px;
background: #666;
text-align: center;
}
兩者還真沒大區別，我個人比較喜歡用雙飛翼佈局，各有各愛好，希望大家掌握著必學的