![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：
Collection
Collection
利用固定定位制作一个在线客 服，使用position：fixed 让其脱离文档流，并且固定在窗口中，代码如下
<!DOCTYPE html>
<html>
<head>
<title>QQ在线客 服</title>
<meta charset="utf-8">
<style type="text/css">
body{height: 1000px}
.box {
border: 1px solid black;
border-radius: 8px;
width: 150px;
padding: 0;
position:fixed;
right: 0;
top: 40%;
}
.top {
font-size: 2rem;
background: #8FCFF2;
text-align: center;
line-height: 4rem;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
.bottom{
background: #CEE4F1;
/*width:100%;*/
height: 100%;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding:10px 30px;
}
.bottom .content{
border: 1px solid black;
text-align: center;
border-radius: 8px;
background: #D6E8F4;
line-height: 2rem;
/*margin: 20px 30px;*/
}
.box img{
width:100px;
margin:0 auto;
display: block;
}
a{
text-decoration-line: none;
}
span{
position: absolute;
top: 1px;
right: 3px;
}
span a{color: black;}
</style>
</head>
<body>
<div class="box">
<div class="top">在线客-服</div>
<div class="middle"><img src="qq.jpg" ></div>
<div class="bottom"><div class="content"><a href="http://qq.com">QQ交谈</a></div></div>
<span onclick="this.parentNode.style.display='none'"><a href="">X</a></span>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
2.利用浮动进行图文混排
文本会围绕浮动元素，并不会钻进浮动元素的下面，这样就有利于布局，代码如下
<!DOCTYPE html>
<html>
<head>
<title>图文</title>
<style type="text/css">
.box{
border: 1px solid yellow;
width: 600px;
margin:auto;
}
img{
float:left;
}
h2{text-align: center;}
p{text-indent: 2rem;}
</style>
</head>
<body>
<div class="box">
<h2>php中文网第三期培-训-班</h2>
<img src="php.jpg">
<p>内容实用: 经过长期调研与学员反馈，汇总出最实用的PHP技术，学完之后，可以快速融入企业开发环境中
</p><p>知识面广: 涵盖PHP及其周边主要技术，web网站建设，微信小程序开发等可以轻松应对！</p><p>
讲解深入: 针对于PHP核心技术，应用场景，以及原理上的讲解，使学员不仅学会，还能举一反三，最终全面掌握。</p><p>
关注前沿: 时时关注市 场上出现的新技术，及时更新课程，确保课程一直走在前沿，不落伍!</p><p>
就业导向: 就业，择业指导，使学员们可以快速，高薪找到自己心仪的工作!</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.双飞翼布局
主要利用float、负的margin以及margin：auto等元素来进行布局，其案列代码如下
<!DOCTYPE html>
<html>
<head>
<title>双飞翼布局</title>
<meta charset="utf-8">
<style type="text/css">
.header,.footer {
width: 100%;
height: 60px;
background: lightgray;
}
.content {
text-align: center;
margin: auto;
background: gray;
width: 1000px;
min-height: 100%;/*子元素的最小高度,使得子元素不会溢出*/
line-height: 60px;
}
.container{background: yellow;width:1000px;margin:auto;
overflow: hidden;
}
.wrap{
background: coral;
float:left;width: 100%;
}
.main{
margin: 0 210px;
min-height: 600px;
background: wheat;
}
.left{
width: 200px;
height:600px;
background: lightblue;
float: left;
margin-left: -100%;
}
.right {
width: 200px;
height:600px;
background: lightgreen;
float:left;
margin-left:-200px;
}
</style>
</head>
<body>
<div class="header"><div class="content">文本</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">文本</div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.圣杯布局
与双飞翼布局类似，更加简单一点，利用相对定位显示出主体部分，其案列代码如下：
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局</title>
<meta charset="utf-8">
<style type="text/css">
.header,.footer {
width: 100%;
height: 60px;
background: lightgray;
clear:both;
}
.content {
text-align: center;
margin: auto;
background: gray;
width: 1000px;
min-height: 100%;/*子元素的最小高度,使得子元素不会溢出*/
line-height: 60px;
}
.container{background: yellow;width:600px;margin:auto;
/*overflow: hidden;*/
}
.main{
/*margin: 0 210px;*/
min-height: 600px;
background: wheat;
width: 100%;
float: left;
}
.left{
width: 200px;
height:600px;
background: lightblue;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 200px;
height:600px;
background: lightgreen;
float:left;
margin-left:-200px;
position:relative;
right: -200px;
}
</style>
</head>
<body>
<div class="header"><div class="content">文本</div></div>
<div class="container">
<div class="main">主体</div>
<div class="left">左</div>
<div class="right">右</div>
</div>
<div class="footer"><div class="content">文本</div></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
以下是这两种布局的区别
总结：浮动元素只影响后面的元素布局，并不会影响前面的元素。
min-height可以让元素的高度不会低于这个值
overfloat：hidden可以解决子元素浮动引起父级高度塌陷
浮动后的行内元素支持宽高设定
