实例
<!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"> <title>双飞翼布局</title> <style>/* 头部 */ .header .content{ width: 100%; height:70px; background-color:aqua; /* 上下外边距为0,左右自动居中 */ /* 因为上下相等,左右也相等,所以可以简写为: margin: 0 auto; */ margin: 0 atuo; } .header .content .nav{ /* 清空导航UL元素的默认样式 */ margin-top: 0; margin-bottom: 0; padding-left: 0; } .header .content .nav .item { list-style-type: none; } .header .content .nav .item a{ /* 一定要将浮动设置到链接标签<a>上面,否则无法实现导航区的点击与高亮 */ float:left; /* 设置个颜色 */ background-color:#886; /* 设置a链接边框是否圆润,我这里设置22% */ border-radius:22%; /*盒子背景的阴影颜色,格式为: x轴 Y轴 Z轴 颜色,且Z轴不能为负数,其他的可以*/ box-shadow:3px 3px 6px blueviolet; /* 给a链接一些左右外边距,上下为5 左右10 */ margin: 5px 10px; /* 设置最小宽度与最小高宽,以适应导航文本的变化 */ min-width: 80px; min-height: 60; /* 设置行高与头部区块等高,导航文本链接可以垂直居中显示 */ line-height: 60px; color: white; /* 设置导航文本的左右内边距 */ padding: 0 15px; /* 删除链接下划线 */ text-decoration: none; /* 让导航文本在每一个小区块中居中显示 */ text-align: center; } .header .content .nav .item a:hover{ background-color: bisque; font-size:1.1rem; } /* 头部结束 */ /* 主体 */ .container{ width: 1000px; /* 给5px的上下外边距,左右自动 */ margin: 5px auto; /* 给点颜色 */ background-color: blueviolet; /*包住浮动的子元素*/ overflow: hidden; } /* 1. 中间区块宽度设置在它的容器wrap中 */ .warp{ /* 继承父级区块container宽度 width:1000px; */ width:inherit; min-height: 800px; background-color: blanchedalmond; } .left{ width: 200px; min-height: 800px; background-color: azure; } /* 右边栏样式 */ .right { width: 200px; min-height: 800px; background-color: lightseagreen } /* 将中间,左,右区块全部左浮动 */ .warp, .left, .right{ float:left; } .left{ /* -100%就可以移动到左侧 */ margin-left: -100% } .right{ /* -20%就可以移动到右侧 */ margin-left: -20%; } .main { /* 向左右两侧填充200px */ padding-left: 200px; padding-right:200px; } /* 主体结束 */ /* 底部 */ .footer{ background-color: lightgray; } .footer .content{ width: 100%; height:60px; background-color:#444; margin: 0 auto; } .footer .content p{ text-align:center; line-height:60px; } .footer .content a{ text-decoration: none; color: aquamarine; margin:auto 5px; } .footer .content a:hover{ color:white; } /* 底部结束 */ </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> </ul> </div> </div> <!-- 主体 --> <div class="container"> <div class="warp"> <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="">国ICP20190430-1</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
这个代码还不是最优版,这是一个大概的版本,如果想仔细研究,可以拿上面的代码二次修改