双飞翼布局
实例
<!DOCTYPE html>
<html>
<head>
<title>双飞翼</title>
<style>
/*header begin*/
.header {
background-color:black;
}
.header .content {
width: 1000px;
height:60px;
background-color:black;
/*除去边距默认的值*/
margin:0 auto;
}
/*头部内容区中的导航*/
.header .content .nav {
margin-top:0;
margin-bottom: 0;
padding-left:0;
}
.header .content .nav .item {
list-style-type: none;
}
/*头部导航中的链接样式:重点*/
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height:60px;
line-height:60px;
color:white;
/*去除链接标签默认的下划线*/
text-decoration-line:none;
padding:0 15px;
text-align:center;
}
.header .content .nav .item a:hover {
background-color: red;
font-size: 1.1rem;
}
/*header end*/
/*用双飞翼来实现主体的布局*/
.container {
width:1000px;
height:650px;
margin:5px auto;
background-color: lightblue;
}
/*wrap是中间内容块的容器*/
.wrap {
width: inherit;
min-height: 600px;
background-color: lightgreen;
}
.left, .right {
width:200px;
min-height:600px;
}
.left {
background-color: lightcoral;
}
.right {
background-color: lightgray;
}
.wrap, .left, .right {
float: left;
}
/*将左侧移动到主体左侧来*/
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
/*在父级区块上挤压主体内容区*/
.main {
padding-left: 200px;
padding-right:200px;
}
/*footer begin*/
.footer {
background-color: lightgrey;
}
.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>
<!-- 头部 -->
<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>
<li class="item"><a href="">联系我们</a></li>
</ul>
</div>
</div>
<!-- 双飞翼 -->
<div class="container">
<!-- 思路:必须先创建中间主体区块，确保它优先被渲染出来，现创建左右2列 -->
<div class="wrap">
<div class="main">主体内容区</div>
</div>
<!-- 左侧 -->
<div class="left">左侧</div>
<!-- 右侧 -->
<div class="right">右侧</div>
<!-- 底部 -->
<div class="footer">
<div class="content">
<p>
<a href="">©PHP中文网版权所有</a> |
<a href="">0551-66881234</a> |
<a href="">皖ICP2019008811-1</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例