双飞翼布局实践：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="static/css/style07.css"> <title>双飞翼布局</title> </head> <body> <div class="header"> <div class="content"> <ul class="nav"> <li class="item"><a href="http://">首页最美</a></li> <li class="item"><a href="http://">最新产品</a></li> <li class="item"><a href="http://">***高尚</a></li> <li class="item"><a href="http://">上上下下</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="">版权所有</a> | <a href="">13888888888</a> | <a href="">测试啦啦啦</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
.header {
width: 100%;
background-color: azure;
}
.header .content {
width: 1100px;
height: 70px;
background-color:lemonchiffon;
margin: 0 auto;
}
.header .content .nav {
margin: 0;
padding: 0;
}
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a {
float: left;
min-width: 80px;
min-height: 60px;
line-height: 60px;
color: rgb(211, 52, 52);
font-size: 1.1rem;
padding: 0 15px;
text-decoration: none;
text-align: center;
}
.header .content .nav .item a:hover {
background-color: aqua;
color: blue;
}
.container {
width: 1100px;
height: 600px;
background-color: dimgrey;
margin: 5px auto;
}
.wrap {
width: inherit;
min-height: inherit;
background-color: chocolate;
}
.left {
width: 200px;
min-height: 600px;
background-color:lightpink;
}
.right {
width: 200px;
min-height: 600px;
background-color: lightslategrey;
}
.wrap, .left, .right {
float: left;
}
.left {
margin-left: -100%;
}
.right {
margin-left: -200px;
}
.main {
padding-left: 200px;
padding-right: 200px;
}
.footer {
width: 100%;
background-color: bisque;
}
.footer .content {
width: 1100px;
height: 70px;
background-color: aquamarine;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content a {
text-decoration: none;
color: antiquewhite
}
.footer .content a:hover {
text-decoration: underline;
color: fuchsia;
}运行实例 »
点击 "运行实例" 按钮查看在线实例