收藏
批改状态：合格
老师批语：原理不难, 难在理解
默写出双飞翼布局的基本思路与实现代码, 要求配图片说明
答：双飞翼布局的基本思路是把网页的主内容区分为左、中、右三块，中间块还要在外面套一个父块，然后把这些块都浮动起来，通过margin-left标签，可以很方便的把左块定位到主内容区的左边，然后右块也很容易地定位到右边，最后到中间块，也是很方便就能定位到中间。
以下是HTML代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="static/css/style-2wings.css"> <title>双飞是***的梦</title> </head> <body> <div class="header"> <div class="headcontent"> <ui 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> </ui> </div> </div> <div class="container"> <div class="main"> <div class="content"> </div> </div> <div class="left"> </div> <div class="right"> </div> </div> <div class="footer"> <div class="footcontent"> <p> <a href="">© 大吉利车队</a> | <a href="">电话：0759-2177177</a> | <a href="">粤G XXXXX</a> </p> </div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
然后是CSS代码：
.container {
width: 1600px;
min-height: 1000px;
margin: 0 auto ;
/*background-color: pink;*/
}
.container .main {
width: 1600px;
min-height: 970px;
/*background-color: lightyellow;*/
float: left;
margin-top: 15px;
}
.container .left {
width: 350px;
min-height: 970px;
background-color: lightblue;
float: left;
margin-left: -1600px;
margin-top: 15px;
}
.container .right {
width: 350px;
min-height: 970px;
background-color: cyan;
float: left;
margin-left: -350px;
margin-top: 15px;
}
.container .content {
width: 870px;
min-height: 970px;
background-color: lightcoral;
margin-left: 365px;
}
/******************************************/
.header {
height: 120px;
/*background-color: lightgreen;*/
}
.header .headcontent {
width: 1600px;
height: 120px;
background-color: lightgrey;
margin:0 auto;
}
.header .headcontent .nav{
margin: 0;
padding: 0;
}
.header .headcontent .nav .item {
list-style-type: none;
}
.header .headcontent .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: black;
text-align: center;
text-decoration: none;
padding: 0 100px;
margin: 30px 0;
font-size: 30px;
}
.header .headcontent .nav .item a:hover {
background-color: red;
font-size: 35px;
}
/*********************************************/
.footer {
height: 120px;
/*background-color: lightgreen;*/
}
.footer .footcontent {
width: 1600px;
height: 120px;
background-color: lightgrey;
margin:0 auto;
}
.footer .footcontent p {
margin: 0;
padding-top: 30px;
text-align: center;
font-size: 30px;
text-decoration: none;
}
.footer .footcontent a {
text-decoration: none;
}
.footer .footcontent a:hover {
color: white;
}点击 "运行实例" 按钮查看在线实例
接着是运行效果图：
总结：双飞翼布局真的很简便就能布好左右板块，通过学习老师说授内容，反复揣摩代码，掌握了双飞翼的原理与用法。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
