固定定位实现QQ在线功能
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位实现QQ在线功能</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.content_qq{
width: 120px;
height: auto;
position: fixed;
right: 0;
top: 200px;
background: #fc5100;
text-align: center;
}
.content_qq>span{
width: 100%;
line-height:45px;
display: block;
font-size: 20px;
color: #efefef;
}
.content_qq a{
padding:5px 10px;
line-height:45px;
background: #efefef;
display: block;
font-size: 20px;
color: #000;
text-decoration: none;
border-bottom: 1px solid #e3e3e3;
}
.content_qq a img{
vertical-align: middle;
}
</style>
<body>
<div class="content_qq">
<span>在线咨询</span>
<a href=""><img src="http://www.php.cn/static/k/qq.png"> <span>xxxxx</span></a>
<a href=""><img src="http://www.php.cn/static/k/qq.png"> <span>xxxxx</span></a>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
