收藏
批改状态：合格
老师批语：你都把作业写到9月8日了
双飞翼布局简单点说就是除开头部和页脚，中间主体部分分为三块，把主要内容块看成身体，左右两栏看成翅膀，这样就是双飞翼了，实现的基本思路是先把中间主体部分用一个盒子框起来，然后把左边框、内容框、右边框浮动，在调整三个框的位置，实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.header .content {
width: 1000px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.header .content .nav {
margin: 0 auto;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
text-decoration-line: none;
color: white;
line-height: 60px;
min-width: 100px;
min-height: 60px;
text-align: center;
/*margin: 0 20px;*/
}
.header .content .nav .item a:hover {
background-color: red;
font-size: 110%;
}
.footer .content {
width: 1000px;
height: 60px;
background-color: lightgray;
margin: 0 auto;
}
.footer .content p {
margin: 0;
padding: 0;
text-align: center;
line-height: 60px;
}
.footer .content p a {
text-decoration-line: none;
color: black;
margin: 0 auto;
}
.footer .content p a:hover {
color: white;
}
.main {
width: 1000px;
min-height: 800px;
padding: 0;
margin: 5px auto;
background-color: lightseagreen;
/*overflow: hidden;*/
}
.main .content {
width: 630px;
background-color: chocolate;
min-height: 800px;
float:left ;
margin-left: 5px;
}
.main .left {
float: left;
width: 180px;
min-height: 800px;
background-color: yellow;
}
.main .right {
float: right;
width: 180px;
min-height: 800px;
background-color: yellowgreen;
}
</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="main">
<div class="left">左边</div>
<div class="content">
<div class="introduce">内容介绍</div>
</div>
<div class="right">右边</div>
</div>
<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>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
