思路:必须先创建中间主体区块,确保它优先被渲染出来, 现创建左右二列
中间内容区需要创建一个父级容器进行包裹
.header 头部
.container 主体 ： .wrap>.main主体内容 .left .right
.footer 底部
假如 .container宽度1000px ，.wrap宽度是继承，.wrap占整个容器宽度，.left和.right都200px.
.wrap和.left和.right全部左浮动。那么container需要清除浮动(overflow:hidden).
.left：margin-left:-100%,移动到左边显示。
.right:margin-left:-200px,移动到右边显示。
把.main主体内容要想显示出来：
.main设置padding-left:200px; padding-right:200px
收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--<link rel="stylesheet" href="static/css/style1.css">-->
<style>
/******************* 头部样式开始 ******************/
.header{
background-color:lightgrey;
}
.header .content{
width:1000px;
height: 60px;
background-color: black;
margin:0 auto;
}
/*设置.nav目的是清空导航UL元素的默认样式*/
.header .content .nav{
margin-top:0;
margin-bottom:0;
padding-left: 0;
}
.header .content .nav .item{
list-style:none;
}
.header .content .nav .item a{
float:left;
text-decoration:none;
min-width:80px;
min-height: 60px;
line-height: 60px;
color:white;
padding:0 50px;
text-align:center;
}
.header .content .nav .item a:hover{
background-color: lightsteelblue;
font-size:1.5rem;
color:red;
}
/******************* 头部样式结束 ******************/
/******************* 主体样式开始 ******************/
.container{
width:1000px;
margin:5px auto;
background-color:lightgray;
overflow:hidden;
}
.container .wrap{
width:inherit;
min-height: 800px;
background-color: aqua;
}
.container .left{
width:200px;
min-height: 800px;
background-color: lightgreen;
}
.container .right{
width:200px;
min-height: 800px;
background-color: lightsteelblue;
}
.wrap , .left ,.right{
float:left;
}
.left{
margin-left:-100%;
}
.right{
margin-left:-200px;
}
.main{
padding-left: 200px;
padding-right: 200px;
}
/******************* 主体样式结束 ******************/
/******************* 底部样式开始 ******************/
.footer {
background-color: lightgray;
}
.footer .content{
width:1000px;
height: 60px;
background-color:#444;
margin:0 auto;
}
.footer .content p{
text-align: center;
line-height: 60px;
}
.footer .content a{
text-decoration:none;
color:lightgrey;
}
.footer .content a:hover{
color:white;
}
/******************* 底部样式结束 ******************/
</style>
<title>双飞翼布局案例</title>
</head>
<body>
<!--头部-->
<!--.header>.content>ul.nav>li.item*4>a-->
<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">
<!--思路:必须先创建中间主体区块,确保它优先被渲染出来, 现创建左右二列-->
<!--中间内容区需要创建一个父级容器进行包裹-->
<div class="wrap">
<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号
