下面时双飞翼布局的基本思路和实现代码
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="2.css"> <style type="text/css"> *{ margin:0px; padding:0px; } .header{ background-color:lightgray; } .header .content{ width:1000px; height:60px; background-color:black; margin:0px auto; } .header .content .nav{ margin:0px; padding:0px; } .header .content .nav .item{ list-style:none; } .header .content .nav .item a{ float:left; min-width:100px; min-height:60px; line-height:60px; color:white; padding:0 15px; text-decoration: none; text-align:center; } .header .content .nav .item a:hover{ background-color:#ccc; font-size:1.1rem; } .container{ width:1000px; margin:5px auto; background-color:lightgray; overflow: hidden; } .wrap{ width:inherit; min-height:800px; background-color:blue; } .left{ width:200px; min-height:800px; background-color:green; } .right{ width:200px; min-height:800px; background-color:lightseagreen; } .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:0px auto; } .footer .content p{ text-align:center; line-height:60px; } .footer .content a{ text-decoration:none; color:lightgrey; } .footer .content a:hover{ color:black; } </style> </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> <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="">©版权所有</a> | <a href="">0551-88889999</a> | <a href="">皖ICP2016098801-1</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
上述代码中涉及知识点注释总结:
双飞翼布局主要通过设置区块的负外边距的方式,实现向反方向移动区块,从而实现三列布局,如同上图中左侧,主体内容区,右侧的效果
中间栏要放在文档流前面以优先渲染