实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1双飞翼布局</title>
<style type="text/css">
.header,.footer {
width:100%;
height:60px;
background-color:lightgray;
}
.content {
width:1000px;
height:100%;
background-color: gray;
margin:auto;
text-align:center;/*内联文本居中*/
line-height:60px;
}
.container {
width:1000px;
margin:auto;
overflow:hidden;/*当前区块能够包住内部的浮动区块*/
background-color:yellow;
}
.wrap {
width:100%;
background-color: cyan;
float:left;/*左浮动*/
}
.main {
min-height:600px;
background-color:wheat;
margin:0 200px;
}
.left {
min-height:600px;
width:200px;
float:left;
background-color: blue;
margin-left:-100%;/*将左侧区块拉回主区块的中间位置*/
}
.right {
min-height:600px;
width:200px;
float:left;
background-color: green;
margin-left:-200px;/*将区块拉回主区块的右侧*/
}
</style>
</head>
<body>
<div class="header">
<div class="content">头部内容</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">主体内容</div>
</div>
<div class="left">左侧内容</div>
<div class="right">右侧内容</div>
</div>
<div class="footer">
<div class="content">尾部内容</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2圣杯布局</title>
<style type="text/css">
.header, .footer {
width:100%;
height:60px;
background-color:lightgray;
}
.footer {
clear:both;/*清除底部左右两边的浮动元素*/
}
.content {
width:1000px;
height:100%;
background-color:gray;
margin:auto;
text-align:center;
line-height:60px;
}
.container {
width:600px;
background-color:yellow;
margin:auto;
overflow:hidden;/*使它能包住浮动区块*/
/*因为左右区块现在覆盖在main之上,挡住了main的内容,现在添加padding来实现自身内容显示*/
padding:0 200px;
}
.main {
height:650px;
width:100%;
float:left;
background:wheat;
}
.left {
width:200px;
min-height:650px;
float:left;
background-color:green;
margin-left:-100%;
position: relative;/*相对定位*/
left:-200px;
}
.right {
width:200px;
min-height:650px;
float:left;
margin-left:-200px;
background-color:lightgreen;
position:relative;
right:-200px;
}
</style>
</head>
<body>
<div class="header">
<div class="content">网站头部内容</div>
</div>
<div class="container">
<div class="main">主 体</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<div class="content">网站尾部内容</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
