实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示双飞翼布局</title>
<style>
.header{
width: 1000px;
height: 60px;
background-color: gray;
text-align: center;
list-style: none;
margin: 10px auto;
}
.text{
line-height: 60px;
float: left;
width: 200px;
}
.text a{
text-decoration-line:none;
}
.text a:hover{
font-size: 1.1em;
color: white;
background-color:black;
display: block;
width: 200px;
height: 60px;
}
.content{
width: 1000px;
min-height:500px;
background-color: lightblue;
margin: 10px auto;
}
.left{
width: 200px;
min-height: 500px;
background-color: pink;
}
.right{
width: 200px;
min-height: 500px;
background-color: green;
}
.main{
width: 600px;
min-height: 500px;
background-color: blue;
}
.left,.main,.right{
float: left;
}
.left{
margin-left: -800px;
}
.main{
margin-left: 200px;
}
.footer{
margin: 10px auto;
width: 1000px;
height: 60px;
background-color: gray;
}
.footer p{
float: left;
}
.footer p:hover{
color: white;
font-size: 1.2em;
}
.p1{
width: 300px;
padding-left: 60px;
}
.p2{
width: 200px;
padding-left: 60px;
}
.p3{
width: 300px;
padding-left: 70px;
}
</style>
</head>
<body>
<!--头部-->
<div class="container">
<div class="header">
<div class="nav">
<li class="text"><a href="">首页</a></li>
<li class="text"><a href="">公司新闻</a></li>
<li class="text"><a href="">最新产品</a></li>
<li class="text"><a href="">关于我们</a></li>
<li class="text"><a href="">联系我们</a></li>
</div>
</div>
</div>
<!--主体-->
<div class="content">
<div class="wrap">
<div class="main">主体</div>
</div>
<div class="left">左侧</div>
<div class="right">右侧</div>
</div>
<!--页脚-->
<div class="box">
<div class="footer">
<p class="p1">常州犇牛机场股份***</p>
<p>|</p>
<p class="p2">0519-12340000</p>
<p>|</p>
<p class="p3">苏IPC2019050711-1</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例