4月29日作业
1. 完成双飞翼布局案例
2. 熟练掌握清除浮动的技巧
########################################
常用的清除浮动的方式
为什么要清浮动?
当有嵌套关系的元素时, 父元素的高度应该由子元素撑开
元素浮动后, 脱离了文档流,如果有父级区块,则父元素无法再包裹住
解决方案1: 父元素设置与子元一样的高度
（此方案十分不灵活）
解决方案2: 父元素跟着子元素一起浮动
（如何子元素的父级还有有父级 就必须也要进行浮动）
解决方案3: 添加一个块元素,专用来清浮动
（这个方案简单粗暴,但会多增加一个dom元素, 在服务器端渲染页面时, 会遇到些麻烦）
解决方案4: 父元素添加一个伪元素,专用来清浮动
content：‘’；
display：table;(display必须是块元素)
clear:both;
解决方案5: 父元素添加overflower,专用来清浮动 (推荐)
overflow: hidden;
常用布局
大多数页面, 头部和底部都是公用的, 变化的是主体部分
主体部分主要有单列布局,二列布局, 三列布局,以及多列布局
三列布局是是基础 其他布局只需要在它的基础上增加删除列
双飞翼实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
* {margin: 0;
padding: 0;}
.header{background-color:#3448a1;}
.header .content {
width: 1000px;
height: 40px;
background-color:#3448A1 ;
margin: 0 auto;
}
/*去除列表样式*/
.header .content .nav .item {
list-style-type: none;
}
.header .content .nav .item a{
font-size: 16px;
font-family: 方正舒体;
color:#ffffff;
float: left;
min-width: 100px;
min-height: 40px;/*给每个a标签一个最小宽高*/
line-height: 40px;
text-decoration: none;/*去除a标签下划线*/
text-align: center;
}
.header .content .nav .item a:hover{
color: lightgrey;
font-size:2.1rem;/*当鼠标移上后字体大小变成原来的两倍*/
}
/*主体*/
/*设置宽高 并水平居中*/
.container{
width: 1000px;
/* min-height: 800px;*//*用wrap 的高度撑开*/
margin: 5px auto;
background-color: lightgreen;
overflow: hidden;/*清除浮动*/
}
.wrap{
width: inherit;
min-height: 800px;
background-color: lightgrey;
}
.left{
width: 200px;
min-height: 800px;
background-color: lightseagreen;
margin-left: -1000px;/*把浮动后的区块移动到中间起点*/
}
.right{
width: 300px;
min-height: 800px;
background-color: lightskyblue;
margin-left: -300px;
}
/*全部左浮动*/
.wrap,.left,.right{
float: left;
}
/*使main显示在中间*/
.main {
padding-left: 200px;
padding-right: 300px;
}
/*底部*/
.footer{
background-color: lightgrey;
}
.footer .content{
width: 1000px;
min-height: 55px;
background-color: lightgrey;
margin: 0 auto;
}
.footer .content p{
text-align: center;
line-height: 55px;
}
.footer .content a{
margin: 0 5px;
text-decoration: none;
color: #0f0f0f;
font-family: 方正舒体;
font-size: 35px;
}
.footer .content p:hover{
color: #0000FF;
}
.footer .content a:hover{
text-decoration: revert;
color:red;
}
</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="">0935-88888888</a><br>
<a href="">陇ICP备18000000号</a>
</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
