实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
body{
width:800px;
min-height: 1000px;
margin: 0 auto;
background-color: lightblue;
}
.header{
width: inherit;
height: 60px;
background-color: burlywood;
/*取消header上下边的默认margin*/
margin-top: 0;
margin-bottom: 0;
/*取消header内边距左边默认宽度*/
padding-left: 0;
padding-top: 20px;
}
.header .content {
width: inherit;
height: 40px;
background-color: inherit;
margin: 0 auto;
}
/*头部内容区中的导航*/
.header .content .nav
{
display: table;
margin:0 auto;
padding-left: 0;
}
.header .content .nav .item
{
/*去掉列表前的小圆点*/
list-style-type: none;
/*设置列表为横排显示的块级元素*/
display: inline-block;
/*设置列表项目对于nav横向居中*/
padding: 0 25px;
/*列表项目的边框*/
/*border: 1px solid red;*/
/*background-color: coral;*/
border-radius: 15%;
/*盒子背景的阴影颜色，格式为： x轴 Y轴 Z轴 颜色，且Z轴不能为负数，其他的可以*/
box-shadow:3px 3px 6px blueviolet;
background-color: azure;
/*给每个列表项目一个左右外边距，上下为0，左右各15，才能保证居中显示。*/
margin: 0 15px;
}
.header .content .nav .item .qq
{
color: #ff1473;
/* 去掉链接标签默认的下划线 */
text-decoration: none;
/*设置行高*/
line-height: 40px;
/*设置字体大小*/
/*font-size: 30px;*/
/*设置字符间距为5px*/
letter-spacing:5px;
}
.header .content .nav .item:hover
{
/* 当鼠标移动到字体上将导航item上背景成黄绿色*/
background-color: aquamarine;
}
.header .content .nav .item .qq:hover
{
/* 当鼠标移动到字体上将导航文本设置为系统根字体大小的1.2倍 */
font-size: 1.2rem;
}
/*------------以下是主体部分-------------*/
.container
{
background-color: aquamarine;
width: inherit;
margin: 4px auto;
/*overflow 属性规定当内容溢出元素框时发生的事情。
hidden 内容会被修剪，并且其余内容是不可见的。
也有把float浮动效果消除的效果，把浮动动态页面变成文档流级别。
clear：是清除浮动，注意两者区别*/
overflow: hidden;
}
.main
{
width: inherit;
background-color: blue;
margin:0 auto;
float:left;
}
.center
{
background-color: green;
width:inherit;
min-height: 400px;
margin:0 auto;
/*左右各设置一个left和right的宽度，文本框刚好设置成显示在最中间框内。*/
/*padding-left: 200px;*/
/*padding-right: 200px;*/
padding:0 200px;
}
.left
{
width: 200px;
background-color: yellow;
min-height: 400px;
/*统一往左浮动，浮动-100%刚好到最左边*/
float: left;
margin-left:-100%;
}
.right
{
width: 200px;
background-color: red;
min-height: 400px;
/*统一往左浮动，浮动-200px刚好到最右边*/
float:left;
margin-left: -200px;
}
/*---------以下是底部------------*/
.foot
{
width:inherit;
height: 60px;
background-color: yellowgreen;
/*减小上下外边距-12，按道理只要减少上边距就可以，上边主体上下各给了一个4px,按道理应该同级塌陷*/
margin: -12px auto;
}
.foot .content
{
width:inherit;
height:60px;
margin: 0 auto;
}
.foot .content p{
text-align: center;
line-height: 60px;
}
.foot .content p a{
text-decoration: none;
color: dimgray;
}
.foot .content a:hover {
color: white;
}
</style>
</head>
<body>
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a class="qq" href="">首页</a> </li>
<li class="item"><a class="qq" href="">新闻</a> </li>
<li class="item"><a class="qq" href="">下载</a> </li>
<li class="item" ><a class="qq" href="">学习</a> </li>
<li class="item"><a class="qq" href="">留言</a> </li>
</ul>
</div>
</div>
<div class="container">
<div class="main">
<div class="center">中间部位</div>
</div>
<div class="left">左边部分</div>
<div class="right">右边边部分</div>
</div>
<div class="foot">
<div class="content">
<p>
<a href="">© XXXXXXX版权所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例