1.定义双飞翼必须套一个div在main上面，在将三者都 float:left ；
2.把left拉到最左边，使用margin-left:-100%
4.这时left拉回来了，但会覆盖main内容的左端，要把main内容拉出来，所以在外围main加上 padding:0 200px 0 200px
5.同理在right要到最右边去用 margin-right:-200px
收藏
/* 清除浏览器边框值 */
*{
margin: 0;
padding: 0;
}
/* header部分 */
.header {
background-color: black;
width: 100%;
height:60px;
}
.header .content{
width: 1000px;
height: inherit;
background-color: red;
margin: 0 auto;
}
.header .content .nav .item {
list-style: none;
}
.header .content .nav .item a{
float: left;
min-width: 60px;
line-height: 60px;
text-align: center;
color:#ccc;
font-size: 1.2rem;
padding: 0 20px;
text-decoration: none;
}
.header .content .nav .item a:hover{
background-color:pink;
color:white;
}
/* container中间部分 */
.container{
width: 1000px;
height: 500px;
background-color: #ccc;
margin: 5px auto;
}
.container .wrap{
width: inherit;
height: inherit;
background-color: aquamarine;
}
.container .left{
width:200px;
height: inherit;
background-color: blue;
margin-left: -100%;
}
.container .right{
width: 200px;
height:inherit;
background-color: blueviolet;
margin-left: -200px;
}
.wrap, .left, .right {
float:left;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
/* footer部分 */
.footer{
background-color: black;
width: 100%;
}
.footer .content{
width: 1000px;
height: 60px;
background-color: red;
margin: 0 auto;
}
.footer .content p{
line-height: 60px;
text-align: center;
list-style: none;
padding: 0 20px;
}
.footer .content a{
text-decoration: none;
}点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通用布局之[双飞翼](Flying Swing Layout)</title> <link rel="stylesheet" href="static/css/style11.css"> </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> </ul> </div> </div> <!-- 中间主体 --> <div class="container"> <!-- 创建双飞翼使用的DOM结构 --> <!-- 必须先创建中间主体区块,确保它优先被渲染出来 --> <!-- 中间内容区需要创建一个父级容器进行包裹 --> <div class="wrap"> <!-- 最终要展示的内容必须写在main区块中 --> <div class="main">主体内容区</div> </div> <!-- 创建左侧边栏区块 --> <div class="left">左侧</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号
