收藏
批改状态：合格
老师批语：双飞翼的本质就是: float + margin, 记住这个就不会忘了
CSS经典布局双飞翼
核心：两侧固定宽度，中间宽度自适应
实现步骤：
1.创建DOM架构
2.确定主体部分固定最小高度，两侧高宽
3.全体浮动
4.全体浮动
5.通过margin-left 移动两侧到指定为主
6设置主体margin将中键内容挤出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>经典布局之双飞翼</title>
<style>
*{
margin: 0;
padding: 0;
}
.header,.footer{
width: 100%;
min-height: 60px;
background-color: #888888;
clear: both;
}
.box{
margin: 0 auto;
width: 1000px;
height: 600px;
}
.container{
width: 100%;
background-color: skyblue;
min-height: 600px;
float: left;
}
.main{
min-height: 600px;
/*background-color: lightyellow;*/
margin:0 200px;
}
.left{
width: 200px;
height: 600px;
background-color: lightcoral;
float: left;
margin-left: -100%;
}
.right{
width: 200px;
height: 600px;
background-color: lightgreen;
float: left;
margin-left: -200px;
}
</style>
</head>
<body>
<!--双飞翼布局-->
<div class="header">头部</div>
<div class="box">
<div class="container">
<div class="main">中间</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<div class="footer">尾部</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
