在线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到了,思想不能太死板··