![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：外部的css加载不进来, 以后可以直接写到当前html中
Collection
Collection
实例演示如何消除子元素浮动造成父元素高度折叠的影响
父元素添加overflower,用来清浮动。
2. 实例演示三列布局的实现原理( 绝对定位实现, 浮动定位实现)
绝对定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/css.css"> <title>Document</title> </head> <body> <div class="container"> <div class="top">头部</div> <div class="main"> <div class="left">左侧</div> <div class="content">内容</div> <div class="right">右侧</div> </div> <div class="boot">底部</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
.container {
width: 1000px;
margin: 0 auto;
}
.top {
height: 40px;
background-color: lightgrey;
}
.boot {
height: 40px;
background-color: lightgrey;
}
.main {
/*min-height: 800px;*/
margin: 5px auto;
background-color: lightblue;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightgreen;
}
.content {
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightpink;
}
.main {
position: relative;
}
.left {
position: absolute;
left: 0;
top: 0;
}
.right {
position: absolute;
right: 0;
top: 0;
}
.content {
margin-left: 210px;
margin-right: 210px;
}点击 "运行实例" 按钮查看在线实例
浮动定位实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/css.css"> <title>Document</title> </head> <body> <div class="container"> <div class="top">头部</div> <div class="main"> <div class="left">左侧</div> <div class="content">内容</div> <div class="right">右侧</div> </div> <div class="boot">底部</div> </div> </body> </html>
点击 "运行实例" 按钮查看在线实例
.container {
width: 1000px;
margin: 0 auto;
}
.main {
margin: 5px auto;
background-color: lightblue;
}
.top {
height: 60px;
background-color: lightgrey;
}
.boot {
height: 60px;
background-color: lightgrey;
}
.left {
width: 200px;
min-height: 800px;
background-color: lightgreen;
}
.content {
min-height: 800px;
background-color: lightseagreen;
}
.right {
width: 200px;
min-height: 800px;
background-color: lightpink;
}
.left {
float: left;
}
.right {
float: right;
}
.content {
float: left;
width: 580px;
margin-left: 10px;
}
.main {
overflow: hidden;
}点击 "运行实例" 按钮查看在线实例
float: left; 就是向左浮动
float: right; 就是向右浮动
overflow: hidden; 就是清除浮动
绝对定位用 position 浮动定位用 float
