网页通用双飞翼布局
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞燕布局</title>
<style>
.header{
/*width: 1000px;*/
background-color: lightseagreen;
}
/*header头部内容区*/
.header .content{
width: 1000px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.header .content .nav{
/* 清空导航UL元素的默认样式 */
margin: 0;
padding: 0;
}
/*头部导航中的列表项样式清除小圆点*/
.header .content .nav .item{
list-style-type: none;
}
/*header头部导航的链接样式*/
.header .content .nav .item a{
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: wheat;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover{
background-color: red;
font-size: 1.1rem ;
}
/*end header*/
/*main主体部分*/
.container{
width: 1000px;
min-height: 800px;
margin: 5px auto;
background-color: palevioletred;
/*overflow: hidden;*/
}
.wrap{
width: inherit;
min-height: 800px;
background-color: cyan;
}
/*左边栏目样式*/
.left{
width: 200px;
min-height: 800px;
background-color: seagreen;
}
.container .left .nav .item{
list-style-type: none;
}
.container .left .nav .item a{
/* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: wheat;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.container .left .nav .item a:hover{
color: red;
font-size: 1.1rem ;
}
/*右边栏目样式*/
.right{
width: 200px;
min-height: 800px;
background-color: slateblue;
}
/*浮动主体子区块*/
.wrap, .left, .right{
float: left;
}
/***** 第四步: 将left和right拉回到他们正确的位置上(重点) *****/
/* 通过设置区块的负外边距的方式,实现向反方向移动区块 */
.left{
/* -100%等价于-1000px,将左区块拉回到中间的起点处*/
/*margin-left: -1000px;*/
margin-left: -100%;
}
.right {
/* -200px就正好将右区块上移到中间区块右侧显示 */
margin-left: -200px;
}
/***** 第五步: 将中间的内容区块 main 显示出来 *****/
.main{
padding-left: 200px;
padding-right: 200px;
}
/*footer底部*/
.footer{
background-color: lightgray;
}
.footer .content{
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
.footer .content p{
text-align: center;
line-height: 60px;
}
.footer .content a{
text-decoration: none;
color: lightgrey;
}
.footer .content a:hover{
color: white;
}
</style>
</head>
<body>
<!--header头部-->
<div class="header">
<div class="content">
<ul class="nav">
<li class="item"><a href="#">首页</a></li>
<li class="item"><a href="#">公司新闻</a></li>
<li class="item"><a href="#">最新产品</a></li>
<li class="item"><a href="#">联系我们</a></li>
</ul>
</div>
</div>
<!--container中间主题-->
<div class="container">
<!-- 1. 中间内容区块 -->
<!-- 中间内容区需要创建一个父级容器进行包裹 -->
<div class="wrap">
<div class="main">主体内容块</div>
</div>
<!--2. left左侧边栏区块-->
<div class="left">
<ul class="nav">
<li class="item"><a href="#">主页</a></li>
<li class="item"><a href="#">课程</a></li>
<li class="item"><a href="#">前端开发</a></li>
<li class="item"><a href="#">后端开发</a></li>
</ul>
</div>
<!--3. right右侧边栏区块-->
<div class="right">右侧</div>
</div>
<!--footer底部页脚-->
<div class="footer">
<div class="content">
<p>
<a href="">© PHP中文网版权所有</a> |
<a href="">0551-88889999</a> |
<a href="">皖ICP2016098801-1</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例