在线QQ客服的固定定位
图示
代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>body{position: relative;}.qq{position:fixed;bottom: 5rem;right: 1rem;}</style><body><div class="qq"><a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=2274666983&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:2274666983:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a></div></body></html>
三行三列的定位布局
图示：
代码实现
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><style>* {margin: auto;padding: auto;font-size: 10px;}body {min-width: 10rem;}.zhudiv {position: relative;}.head {height: 2rem;background-color: aquamarine;}.foot {width: 100%;height: 2rem;background-color: aquamarine;position: fixed;bottom: 0;}.zuo {width: 10rem;position: fixed;right: ;margin: 1px;top: 2rem;bottom: 2rem;background-color: blueviolet;}.zhon {position:fixed;right: 10rem;left: 10rem;margin: 1px;top: 2rem;bottom: 2rem;background-color: coral;}.you {width: 10rem;position: fixed;right: 0;margin: 1px;top: 2rem;bottom: 2rem;background-color: blueviolet;}</style><body><div class="zhudiv"><div class="head">头</div><div><div class="zuo">左手</div><div class="zhon">身体</div><div class="you">右手</div></div><div class="foot">脚</div></div></body></html>
总结：在内容区关于左中右区块，自己的思想是每一个盒子都要设置宽度，但是被老师点一下后，才明白有一些是可以不用宽度的，get到了，思想不能太死板··
