默写出双飞翼布局的基本思路与实现代码, 要求配图片说明
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
.whole{
width: 1000px;
margin: 0 auto;
border: 1px solid black;
}
.header,.footer{
background: black;
height: 60px;
}
.header .nav{
margin:0;padding: 0;
}
.header .nav .item{
list-style-type: none;
}
.header .nav .item a{
float: left;
min-height: 60px;
min-width: 80px;
line-height: 60px;
padding:0 15px;
color: white;
text-decoration: none;
}
.header .nav .item a:hover{
background: red;
}
.main{
background: lightpink;
margin: 5px auto;
overflow: hidden;
}
.left,.right{
min-height: 750px;
width: 200px;
border: 1px solid red;
background: darkgreen;
}
.left{
float: left;
}
.right{
float: right;
}
.content{
float: left;
}
.content{
width: 580px;
}
.footer p{
line-height: 60px;
color: #eee;
text-align:center;
}
</style>
</head>
<body>
<div class="whole">
<div class="header">
<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>
<li class="item"><a href="#">资源下载</a></li>
<li class="item"><a href="#">工具下载</a></li>
<li class="item"><a href="#">菜鸟学堂</a></li>
</ul>
</div>
<div class="main">
<div class="left">左侧</div>
<div class="content">中间内容</div>
<div class="right">右侧</div>
</div>
<div class="footer">
<p>Copyright 2014-2019
http://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例