前言或者说是总结，来者可以对着我的总结来看代码
双飞翼与圣杯的区别
Dom结构上基本一样只是圣杯布局少了一个div
双飞翼布局采用中间自适应，两边浮动
圣杯布局采用了中间固定宽度两边定位，其实就是把双飞翼布局改编一下，太多的相识
现在看效果图
双飞翼布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
/*.left的这个div的值设置为-100%时就和warp的左边对齐了*/
margin: 0;padding: 0;
text-align: center;
}
.top,.footer{
width: 100%;
height: 100px;
background-color: #ccc;
margin:0 auto;
line-height: 100px;
background-repeat: no-repeat;
background-size: 100% 100%;
text-shadow: 2px 2px 3px #fff;
}
.top{
background-image: url(http://www.php.cn/tpl/Index/Static/shequ/img/zhuangti.jpg);
}
.footer{
background-image: url(http://www.php.cn/tpl/Index/Static/css/img/common/bg-teacher.png);
}
.container{
width: 1000px;
margin: auto;
background-color: #444444;
overflow: hidden;
/*使整个块居中*/
}
.warp{
width: 100%;
float: left;
/*设置了一个宽度，并向左浮动*/
}
.main{
height: 400px;
margin: 0 200px;
background-color:#80afa4;
/*warp的div宽自适应、居中*/
}
.left, .right{
width: 200px;
height: 400px;
float: left;
background-color: #686868;
/*warp后边的两个块也跟着向左浮动*/
}
.left{
margin-left: -100%;
/*.left的这个div的值设置为-100%时就和warp的左边对齐了*/
}
.right{
margin-left: -200px;
/*.right的这个div的值设置为-200px时就和warp的右边对齐了*/
}
</style>
</head>
<body>
<!-- top -->
<div class="top"><h2>盗版PHP中文网</h2></div>
<!-- main -->
<div class="container">
<div class="warp">
<div class="main">中</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<!-- footer -->
<div class="footer"><h3>版权没有</h3></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
-
圣杯布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
*{
margin: 0;padding: 0;
text-align: center;
}
.top,.footer{
width: 100%;
height: 100px;
line-height: 100px;
background-repeat: no-repeat;
background-size: 100% 100%;
text-shadow: 2px 2px 3px #fff;
}
.top{
background-image: url(http://www.php.cn/tpl/Index/Static/shequ/img/zhuangti.jpg);
}
.footer{
background-image: url(http://www.php.cn/tpl/Index/Static/css/img/common/bg-teacher.png);
}
.container{
width: 600px;
margin: auto;
background-color: #444444;
overflow: hidden;
padding: 0 200px;
/*使整个块居中 并加上一个padding*/
}
.main{
width: 100%;
height: 400px;
background-color:red;
float: left;
}
.left, .right{
width: 200px;
height: 400px;
float: left;
background-color: #686868;
position: relative;
/*main后边的两个块也跟着向左浮动 相对与当前位置移动*/
}
.left{
margin-left: -100%;
/*.left的这个div的值设置为-100%时就和warp的左边对齐了*/
left: -200px;
}
.right{
margin-left: -200px;
/*.right的这个div的值设置为-200px时就和warp的右边对齐了*/
right: -200px;
}
</style>
</head>
<body>
<!-- top -->
<div class="top"><h2>盗版PHP中文网</h2></div>
<!-- main -->
<div class="container">
<div class="main">中</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<!-- footer -->
<div class="footer"><h3>版权圣杯</h3></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
再往下就是自己为了记住这种布局所进行的记忆加深大法
