实例
使用固定定位做一个网站的QQ客栏，主要是理解定位。fixed固定定位是相对整个body，absolute绝对定位是相对父级，给予定位后都会脱离文档流。
使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
而对于使用absolute :position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位-客QQ</title>
</head>
<body>
<style>
.box1 {
vertical-align: middle;
width: 200px;
height: 300px;
position: fixed;
bottom: 0;
right: 0;
background-color: #eeeeee;
}
ul {
padding: 0;
}
ul li {
width: 200px;
height: 50px;
list-style: none;
line-height: 50px;
text-align: center;
border-bottom: 1px solid #ccc;
}
img {
vertical-align: middle;
}
a {
height: 34px;
text-decoration: none;
color: #999;
vertical-align: middle;
}
</style>
<div class="box1">
<ul>
<li>
<img src="images/qq.png" alt="">
<a href="">在线客1</a>
</li>
<li>
<img src="images/qq.png" alt="">
<a href="">在线服2</a>
</li>
<li>
<img src="images/qq.png" alt="">
<a href="">在线客客3</a>
</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
![58]S{8$8ZQ{{BD_D_Z0H837.png](https://img.php.cn//upload/image/397/195/353/1534692524241927.png "1534692524241927.png")
总结：自我觉得练习的太少，课上看老师边讲边写代码实现功能每个都能理解 ，但是真正自己上手做时好像没啥头绪。一个标签一个内容的往上套一样，而且缺乏整个功能怎样实现的大纲思维。文本控制，布局对齐等真的很重要，任何一个网站都是多个块、文本、图像构成的。
图文混排
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实战图文混排</title>
</head>
<body>
<style>
h1, p {
margin: 0;
}
.box {
width: 700px;
background-color: #efefef;
font-size: 1rem;
color: #555;
border-radius: 1rem;
padding: 20px;
}
.box h2 {
text-align: center;
margin-bottom: 20px;
}
.box img {
width: 200px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
}
.box p {
text-align: 2rem;
line-height: 1.5rem;
}
</style>
<div class="box">
<h2>《PHP中文网第三期班》</h2>
<img src="../images/girl.jpg" alt="">
<p>为了第三期的培训，我们18位老师和同事历经3月精心准备。每一个PPT，每一行代码，每一个实战案例都是经过
我们老师和同事们反复讨论，反复打磨敲定！我们追求完美，力求每一节课程都是精品！
为了这次课程，我们的培训老师也是在一起相互试听，不断改进教学风格，坚持幽默，深入浅出，
力求每一个学员都能听得懂，学得会！我们的辅导老师也是早早准备好！跟进监督每位学员的作业
（避免光学不练空架子），及时解答学员的问题，更有回答某些学员的生活上的私人问题~~默默的奉献！
PHP中文网第三期线上_前端基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,
Bootstrap,页面布局实战 《网站管理后台》的模板开发
</p>
<p>为了第三期的培训，我们18位老师和同事历经3月精心准备。每一个PPT，每一行代码，每一个实战案例都是经过
我们老师和同事们反复讨论，反复打磨敲定！我们追求完美，力求每一节课程都是精品！
为了这次课程，我们的培训老师也是在一起相互试听，不断改进教学风格，坚持幽默，深入浅出，
力求每一个学员都能听得懂，学得会！我们的辅导老师也是早早准备好！跟进监督每位学员的作业
（避免光学不练空架子），及时解答学员的问题，更有回答某些学员的生活上的私人问题~~默默的奉献！
PHP中文网第三期线上_前端基础学习内容: HTML5,CSS3,JavaScript,jQuery,Vue.js入门,
Bootstrap,页面布局实战 《网站管理后台》的模板开发(综合应用以上所学知识)
</p>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：图文混排也相当于是网站布局，只是局部的而已。主要是运行div布局，文本图片排版，css各种对齐样式很重要，主要还是要多练。
双飞翼三列布局
还得好好理解理解、吃透。目前抄了一遍，大致是理解的，计划仿一个简单的网站页面了上传上来
圣杯三列布局
还得好好理解理解、吃透。目前抄了一遍，大致是理解的，计划仿一个简单的网站页面了上传上来
手抄：双飞翼和圣杯布局的最大局别
1、双飞翼布局的主体内容main必须要多套一个wrap包裹
2、双飞翼布局大多用于大型网站，圣杯布局大多用于中小型网站
