效果图：（期间不小心写错一个单词，right 写错成righr 导致后来主体右边一直没有反应，核对了css和html，才找到原因）
实例
.header{
background-color: aqua;
/*颜色参考*/
}
/*头部 给一个宽度 高度 还有背景色*/
.header .content {
width: 1000px;
height: 60px;
background-color: black;
margin: 0 auto;
}
.header .content .nav {
margin-top: 0;
margin-bottom: 0;
padding-left: 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: white;
/* 设置民航文本的左右内边距,使导航文本不要挨的太紧 */
padding: 0 18px;
/* 去掉链接标签默认的下划线 */
text-decoration: none;
text-align: center;
}
/* 当鼠标移入到导航链接上时改变背景色与文本前景色,实现当前导航高亮功能 */
.header .content .nav .item a:hover{
background-color: crimson;
/* 将导航文本设置为系统根字体大小的1.5倍 */
font-size: 1.5rem;
}
/******************* 头部样式结束 ******************/
/******************* 主体样式开始 ******************/
/***** 第一步: 主体容器设置总宽度,并水平居中 *****/
.container {
width: 1000px;
/*min-height: 800px;*/
margin: 5px auto;
/* 参考色块: 整个主体容器是灰色背景 */
background-color: lightgray;
/*border: 2px solid red;*/
/*包住浮动的子元素*/
overflow: hidden;
}
/***** 第二步: 左,右二侧固定宽度,中间区块自适应 *****/
/* 1. 中间区块宽度设置在它的容器wrap中 */
.wrap {
/* 继承父级区块container宽度 width:1000px; */
width: inherit;
/* 高度也继承主体区块 */
min-height: 800px;
/*参考背景色*/
background-color: cyan;
}
/* 2. 设置左,右区块的宽度和高度(因为无内容,所以设置了最小高度),并设置参考色块 */
/* 左边栏样式 */
.left {
width: 200px;
min-height: 800px;
background-color: lightcoral;
}
/* 右边栏样式 */
.right {
width: 200px;
min-height: 800px;
background-color: lightseagreen
}
/***** 第三步:将中间,左,右区块全部左浮动 *****/
/* 因中间区块宽度100%,所以左右会被挤压到下面 */
.wrap, .left, .right {
float: left;
}
/***** 第四步: 将left和right拉回到他们正确的位置上(重点) *****/
/* 通过设置区块的负外边距的方式,实现向反方向移动区块 */
.left {
/* -100%等价于-1000px,将左区块拉回到中间的起点处*/
/*margin-left: -1000px;*/
margin-left: -100%;
}
.right {
/* -200px就正好将右区块上移到中间区块右侧显示 */
margin-left: -200px;
}
/* 现在还有最后一个问题,中间内容区块main没有显示出来 */
/***** 第五步: 将中间的内容区块 main 显示出来 *****/
.main {
padding-left: 200px;
padding-right: 200px;
/*padding: 0 200px;*/
}
/******************* 底部样式开始 ******************/
/* 底部与头部的基本样式类似 */
.footer {
background-color: lightgray;
}
.footer .content {
width: 1000px;
height: 60px;
background-color: #444;
margin: 0 auto;
}
.footer .content p {
text-align: center;
line-height: 60px;
}
.footer .content a {
text-decoration: none;
color: lightgrey;
}
/* 鼠标移入时显示下划线并加深字体前景色 */
.footer .content a:hover {
color: white;
}
/******************* 底部样式结束 ******************/运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>双飞翼布局</title> <link rel="stylesheet" href="css/shuangfeiyi.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"> <!-- 思路:必须先创建中间主体区块,确保它优先被渲染出来, 再创建左右二列 --> <!-- 1. 中间内容区块 --> <!-- 中间内容区需要创建一个父级容器进行包裹 --> <div class="wrap"> <div class="mian">主体内容区</div> </div> <!--2.左侧边栏区--> <div class="left"> 主体左侧</div> <!--3.右侧边栏区--> <div class="right"> 主体右侧</div> </div> <div class="footer"> <div class="content"> <p> <a href="">底部导航1</a> <a href="">底部导航2</a> <a href="">底部导航3</a> </p> </div> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例