实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style>
.nav{ width: 1000px;height: 60px; background-color: black; margin: 0 auto;}
.container{ width:600px; height:600px; background-color: red;
margin:5px auto; padding-left: 200px; padding-right: 200px; }
.main{ width:600px; height:600px; background-color: pink; float:left; }
.left{ width: 200px; height:600px; background-color:lightyellow;
float:left; margin-left: -100%; position: relative; left:-200px; }
.right{ width:200px; height:600px; background-color:lightgreen;
float:left; margin-left: -200px; position: relative; right:-200px; }
.footer{ width:1000px; height:60px; background-color: gray; margin:5px auto; }
ul{ margin: 0;padding: 0; }
li{ list-style-type: none; }
a { min-width: 100px; position: relative; float: left; height: 1.5rem; color: white;
text-decoration: none; text-align: center; margin: 10px;}
/*注意冒号，悬停时便签字体变红*/
a:hover{ background-color:orange;text-decoration: underline; color: rgb(248, 12, 12); }
</style>
</head>
<body>
<div class="header">
<div class="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">社区问答</a></li>
<li><a href="#">编程词典</a></li>
<li><a href="#">手册下载</a></li>
<li><a href="#">工具下载</a></li>
<li><a href="#">菜鸟学堂</a></li>
</ul>
</div>
</div>
<div class="container">
<div class="main">主体内容区</div><!-- 最终要展示的内容写在main区块中 -->
<div class="left">左侧左侧</div>
<div class="right">右侧右侧</div>
</div>
<div class="footer">
<ul>
<li><a href="#">网站首页 | </a></li>
<li><a href="#">PHP视频 | </a></li>
<li><a href="#">PHP实战 | </a></li>
<li><a href="#">PHP代码 | </a></li>
<li><a href="#">PHP手册 | </a></li>
<li><a href="#">词条 | </a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style>
.header{ width: 1000px; height: 60px; background-color: black; margin: 0 auto; }
.container{ width:1000px; height:600px; background-color: gray; margin:5px auto; }
.main{ width:1000px; height:600px; background-color: pink; float:left; }
.left{ width: 200px; height:600px; background-color:lightyellow;
float:left; margin-left: -1000px;/*-100%等价于-1000px,将左区块拉回到中间的起点处*/ }
.right{ width:200px; height:600px; background-color:lightgreen;
float:left; margin-left: -200px;/* -200px就正好将右区块上移到中间区块右侧显示 */ }
.wrap{ padding-left: 200px; padding-right: 200px; }
.footer{ width:1000px; height:60px; background-color: gray; margin:5px auto; }
ul{ margin: 0; padding: 0; }
li{ list-style-type: none; }
a { min-width: 100px; position: relative; float: left;
height:1.5rem; color:white; text-decoration: none;
text-align:center; margin: 10px; }
a:hover{ /*注意冒号，悬停时便签字体变红*/
background-color:orange;
text-decoration: underline;
color: rgb(248, 12, 12);
}
</style>
</head>
<body>
<div class="header">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">社区问答</a></li>
<li><a href="#">编程词典</a></li>
<li><a href="#">手册下载</a></li>
<li><a href="#">工具下载</a></li>
<li><a href="#">菜鸟学堂</a></li>
</ul>
</div>
<div class="container">
<div class="main">
<div class="wrap">主体内容区</div><!-- 最终要展示的内容在main子区块wrap中 -->
</div>
<div class="left">左侧左侧</div>
<div class="right">右侧右侧</div>
</div>
<div class="footer">
<ul>
<li><a href="#">网站首页 | </a></li>
<li><a href="#">PHP视频 | </a></li>
<li><a href="#">PHP实战 | </a></li>
<li><a href="#">PHP代码 | </a></li>
<li><a href="#">PHP手册 | </a></li>
<li><a href="#">词条 | </a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
圣杯布局和双飞翼布局都是两边定宽，中间自适应的三栏布局。中间栏要在放在文档流前面以优先渲染。双飞翼布局比圣杯布局多创建了一个div，但不用相对布局。圣杯布局中，侧边栏位于中间栏父级div的padding；双飞翼布局，侧边栏位于中间栏子级div的padding。
