浮动与经典布局的详解
时间：2018年8月18号 天气：阴转晴天
1. 编程:固定定位制作QQ在线客 服：
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位操作</title>
<style>
.box2{
height: 2500px;
width: 100%;
}
.box1{
width: 125px;
height: 185px;
background-color: white;
border: 2px solid lightgray;
z-index: 5px;
/*box-shadow: -1px -1px gray;*/
position: fixed;
top: 50%;
right: 0px;
display:table-cell ;
text-align: center;
vertical-align: middle;
}
.box1 p,span{
font-size: 1rem;
font-weight: lighter;
/*margin-top: 5px;*/
/*margin-bottom: 5px;*/
margin: 10px 5px;
}
/*img,p,span{*/
/*text-align: center;*/
/*}*/
</style>
</head>
<body>
<div class="box2">
<div class="box1">
<a href="http://kf.qq.com/"><img src="img/code.jpg" alt="腾讯客 服"></a>
<p>关注微信公众号</p>
<span>向腾讯客 服提问</span>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
本机运行图：
