收藏
批改状态：合格
老师批语：
一些博客和论坛中经常看到经典的双飞翼布局
何谓双飞翼布局？
简单来说，双飞翼布局是将一个网页分为左列，中列和右列三部分，并且我们要得到的效果是：
左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应，如下图。
下面我们用代码实现一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>双飞翼三列布局</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
.header, .footer{
height: 60px;
background-color: gray;
}
.footer {
clear: both；/*清除浮动*/
}
.content{
width:1000px;
margin: 0 auto;
text-align: center;
line-height: 60px;
background-color: #DE9090;
}
.main{
width: 1000px;
/*height: 650px;*/
background-color: #FFCC99;
margin: auto;
overflow: hidden; /*高度塌陷*/
}
.wrap{
width: 100%;
float: left;
}
.left {
width: 200px;
height: 650px;
float: left;
background-color: #0099CC;
margin-left: -100%;
}
.right {
width: 200px;
height: 650px;
float: left;
background-color: #99CC66;
margin-left: -200px;
}
.center {
/*width: 100%;*/
height: 650px;
background-color: #FFFFCC;
margin: 0 200px;
}
</style>
</head>
<body>
<!-- 头部 -->
<div class="header">
<div class="content">这是头部</div>
</div>
<!-- 主体 -->
<div class="main">
<div class="wrap">
<div class="center">主体中间</div>
</div>
<div class="left">主体左侧</div>
<div class="right">主体右侧</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="content">这是底部</div>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
