双飞翼布局实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>前端布局-双飞翼布局仿淘宝首页</title>
<!-- <link rel="stylesheet" href="staic/css/style04.css"> -->
<style>
* {
margin: 0px;
padding: 0px;
}
.header {
width: 100%;
background-color: #f5f5f5;
}
.header .content {
width: 1190px;
height: 36px;
background-color: #f5f5f5;
margin: 0 auto;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .left .nav a {
float: left;
min-width: 60px;
padding: 0 3px;
line-height: 36px;
color: #6C6C6C;
font-size: 12px;
text-decoration: none;
}
.header .content .left .nav a:hover {
float: left;
min-width: 60px;
padding: 0 3px;
line-height: 36px;
color: #f22e00 !important;
font-size: 12px;
text-decoration: none;
}
.header .content .right .nav a {
float: right;
min-width: 60px;
padding: 0 3px;
line-height: 36px;
color: #6C6C6C;
font-size: 12px;
text-decoration: none;
}
.header .content .right .nav a:hover {
float: right;
min-width: 60px;
padding: 0 3px;
line-height: 36px;
color: #f22e00;
font-size: 12px;
text-decoration: none;
}
.header2 {
top: 0;
background-color: #FFF;
padding-top: 15px;
height: 127px;
}
.header2 .content {
width: 1190px;
margin: 0 auto;
position: relative;
/* background-color: #f22e00; */
}
.header2 .content .leftlogo {
float: left;
width: 190px;
padding-top: 30px;
}
.header2 .content .leftlogo img {
margin: 0 22px;
width: 142px;
}
.header2 .content .middle {
float: left;
padding-left: 30px;
margin: 0 auto;
}
.header2 .content .right {
float: left;
margin-left: 30px;
margin-top: 15px;
border: 1px solid #eee;
width: 72px;
height: 97px;
position: relative;
top: 0;
}
.header2 .content .right span {
line-height: 20px;
margin-left: 10px;
width: 78px;
font-size: 12px;
color: #ff5000 !important;
}
.header2 .content .right img {
display: block;
margin-left: 6px;
width: 62px;
height: 62px;
}
/* 第一步先设置容器的宽度，并居中显示 */
.container {
width: 1190px;
height: 640px;
background-color: #F4F4F4;
margin: 0 auto;
}
/* 第二步把主体内容放入wrap中 左右侧固定宽度 中间内容自适应 */
.container .wrap {
width: inherit;
min-height: 600px;
background-color: #F4F4F4;
}
.container .left {
width: 190px;
min-height: 500px;
background-color: burlywood;
}
.container .right {
width: 292px;
min-height: 500px;
background-color: lightpink;
}
/* 第三部，将三个部分全部左浮动 */
.container .wrap,
.container .left,
.container .right {
float: left;
}
/* 第四步 通过设置负边距 调整位置 */
.container .left {
margin-left: -100%;
}
.container .right {
margin-left: -292px;
}
.container .wrap .main {
padding-left: 200px;
padding-right: 290px;
background-color: chocolate;
height: 500px;
}
.container .wrap .main img {
margin: 0 auto;
}
.footer {
margin-top: 20px;
width: 100%;
height: 201px;
background-color: #F5F5F5;
border: 1px solid #eee;
}
.footer .content {
width: 1190px;
margin: 0 auto;
text-align: center;
line-height: 201px;
}
</style>
</head>
<body>
<!-- 头部一 -->
<div class="header">
<div class="content">
<div class="left">
<ul class="nav">
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">中国大陆</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">亲，请登录</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">免费注册</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">手机逛淘宝</a></li>
</ul>
</div>
<div class="right">
<ul class="nav">
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">网站导航</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">联系客服</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">卖家中心</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">商品分类</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">收藏夹</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">购物车</a></li>
<li class="item"><a href="http://" target="_blank" rel="noopener noreferrer">我的淘宝</a></li>
</ul>
</div>
</div>
</div>
<!-- 头部二 -->
<div class="header2">
<div class="content">
<div class="leftlogo">
<img src="https://img.alicdn.com/tfs/TB1_uT8a5ERMeJjSspiXXbZLFXa-143-59.png" alt="淘宝网">
</div>
<div class="middle" style="background-color: #ff5000">
<!-- <img src="staic/img/middle.png" alt="淘宝网"> -->
</div>
<div class="right">
<span>手机淘宝</span>
<img src="http://img.alicdn.com/tfs/TB18W1cQFXXXXaWXXXXXXXXXXXX-160-160.png" alt="">
</div>
</div>
</div>
<!-- 中间主题 -->
<div class="container">
<!-- wrap是主ti内容区必须的一个父级容器 -->
<div class="wrap">
<div class="main">
主体内容
<!-- <img src="staic/img/content_main.jpg" alt="主体"> -->
</div>
</div>
<div class="left">
左侧内容
<!-- <img src="staic/img/content_left.png" alt="左侧"> -->
</div>
<div class="right">
右侧内容
<!-- <img src="staic/img/content_right.png" alt="右侧"> -->
</div>
</div>
<!-- 尾部 -->
<div class="footer">
<div class="content">
<p><a href="">淘宝包版权所有</a> 丨
<a href="">0512-4565454</a> 丨
<a href="">友情链接</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
要点：主体必须放在一个父级容器（wrap）里，左右侧固定宽度，然后全部左浮动，再通过负边距调整位置，最后通过主体的内边距的讲中间主体“挤出来”。