<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <link rel="stylesheet" href="static/css/style6.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> <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-65358899</a> | <a href="">皖ICP备18***333-1</a> </p> </div> </div> </body> </html>
收藏
.header{
background-color: gray;
}
.header .content{
width: 1000px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.header .content .nav{
margin: 0;
padding: 0;
}
.header .content .nav .item{
list-style: none;
}
.header .content .nav .item a{
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: white;
text-decoration: none;
padding: 0 15px;
}
.header .content .nav .item a:hover{
background-color: red;
font-size: 1.1rem;
}
/*将主体部分使用双飞翼布局三列布局*/
/*主体 ：宽度100% 并且要浮动*/
/*左边栏 ：浮动*/
/*右边栏：浮动*/
.container{
width: 1000px;
min-height: 800px;
margin: 30px auto;
background-color: lawngreen;
overflow: hidden;
}
.wrap{
width: inherit;
height: 800px;
background-color: lightcyan;
}
.left{
width: 200px;
height: 800px;
background-color: lightskyblue;
}
.right{
width: 200px;
height: 800px;
background-color: lightcoral;
}
/*全部浮动*/
.wrap,.left,.right{
float: left;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
.main{
margin: 0 200px;
}
.footer{
background-color: gray;
}
.footer .content{
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
.footer .content p{
text-align: center;
line-height: 60px;
}
.footer .content p a{
color: #eee;
text-decoration: none;
}
.footer .content a:hover{
color: white;
}点击 "运行实例" 按钮查看在线实例
![$Z~4XI~NJ3CQPMDFM3]BMY9.png](https://img.php.cn/upload/image/581/848/919/1563104981120105.png "1563104981120105.png")
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
