<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>8.17作业</title>
<style>
body{
margin:0;padding:0;
}
h2{
text-align: center;}
</style>
</head>
<body>
<!--定位qq在线服务 start-->
<div class="qq">
<img src="images/qq.jpg" alt="">
<span onclick="this.parentNode.style.display='none'">x</span>
</div>
<style>
.qq{
width:200px;
position: fixed;
right: 0;
top:0;
}
.qq span{
position: absolute;
right: 29px;
top: 0px;
cursor: pointer;
}
</style>
<!--定位qq在线服务 end-->
<!--浮动实现图文混排start-->
<div class="float">
<img src="images/lv.jpg" alt="">
<p class="txt">8月11日16时30分许，记者来到铁西区赞工街勋业五路上，一只驴子被拴在路边，低着头耷拉着眼睛，好像知道自己犯了错一样，表 情十分无辜。身后还拉着一车李子，事情已经发生了近一个小时，现场仍然还有很多目击者没有离去，围在现场看事情进展，还有不少路人掏钱买李子。
路边停着一辆黑色的奥迪A8L轿车，后保险杠左侧受损，向内凹陷，左车灯也有损坏痕迹。<br>
</p>
</div>
<style>
.float{
width:600px;
margin:0 auto;
}
.float img{width:300px;float:left;margin:20px}
.txt{font-size: 1.5rem;line-height: 2rem;}
</style>
<!--浮动实现图文混排end-->
<h2>双飞翼三列布局 </h2>
<!--双飞翼三列布局 start-->
<style>
.sfy{text-align: center;}
.sfy .header,.footer{
width: 100%;
background:wheat;
}
.sfy .header .content,.footer .content{
width: 1000px;
margin: 0 auto;
line-height: 50px;
height: 50px;
background:darkgrey;
}
.sfy .container{
width: 1000px;
margin:0 auto;
background:green;
overflow: hidden;
}
.sfy .container .wrap{
width: 100%;
background:cornflowerblue;
float: left;
}
.sfy .container .wrap .main{
min-height: 400px;
/*margin: 0 200px;*/
background: white;
}
.sfy .container .left{
width: 200px;
background:red;
min-height: 400px;
float: left;
margin-left:-100%;
}
.sfy .container .right {
width: 200px;
background: blue;
min-height: 400px;
float: left;
margin-left:-200px;
}
</style>
<div class="sfy">
<div class="header">
<div class="content">heder</div>
</div>
<div class="container">
<div class="wrap">
<div class="main">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="footer">
<div class="content">footer</div>
</div>
</div>
<!--双飞翼三列布局 start-->
<hr>
<h2>圣杯三列布局</h2>
<!--圣杯三列布局 start-->
<div class="sb">
<div class="head">
<div class="content">heder</div>
</div>
<div class="container">
<div class="main">主体内容</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="foot">
<div class="content">footer</div>
</div>
</div>
<style>
.sb{text-align: center;}
.sb .head,.foot{
width: 100%;
background:darkorchid;
}
.sb .head .content,.foot .content{
width: 1000px;
margin: 0 auto;
line-height: 50px;
height: 50px;
background:darkkhaki;
}
.sb .container{
width: 1000px;
margin:0 auto;
background:green;
overflow: hidden;
}
.sb .container .main{
width: 100%;
min-height: 500px;
background:red;
float:left;
}
.sb .container .left{
width: 200px;
min-height: 500px;
background:wheat;
float:left;
margin-left: -100%;
}
.sb .container .right{
width: 200px;
min-height: 500px;
background:blue;
float: left;
margin-left: -200px;
}
</style>
<!--圣杯三列布局 end-->
</body>
</html>双飞翼布局和圣杯布局，区别在于中间中间主体空间，如果主题是通过margin边距撑开的就是双飞翼布局,如果是通过相对定位撑开的,就是圣杯布局.