DIV+CSS右侧底部悬浮的客服导航条

作者(出处):百宝箱工作室发布时间:2017年2月25日 15:48:39查阅量:684

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV+CSS右侧底部悬浮的客服导航条 - 百宝箱工作室 http://www.baibaox.com </title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
	outline: 0;
}
.side-bar a,.hovertree-chat-tips i {
	background-image: url(http://www.baibaox.com/html5/img/gdt-img.png);
	background-repeat: no-repeat;
}
.side-bar {
	width: 66px;
	position: fixed;
	bottom: 20px;
	right: 25px;
	font-size: 0;
	line-height: 0;
	z-index: 100;
}
.side-bar a {
	width: 66px;
	height: 66px;
	display: inline-block;
	background-color: #dddddd;
	margin-bottom: 2px;
}
.side-bar a:hover {
	background-color: #669fdd;
}
.side-bar .icon-qq {
	background-position: 0 -62px;
}
.side-bar .icon-chat {
	background-position: 0 -130px;
	position: relative;
}
.side-bar .icon-chat:hover .hovertree-chat-tips {
	display: block;
}
.side-bar .icon-blog {
	background-position: 0 -198px;
}
.side-bar .icon-mail {
	background-position: 0 -266px;
}
.side-bar .icon-totop {
	background-position: 0 -334px;
}
.hovertree-chat-tips {
	padding: 20px;
	border: 1px solid #d1d2d6;
	position: absolute;
	right: 78px;
	top: -55px;
	background-color: #ffffff;
	display: none;
}
.hovertree-chat-tips i {
	width: 9px;
	height: 16px;
	display: inline-block;
	position: absolute;
	right: -9px;
	top: 80px;
	background-position:-88px -350px;
}
.hovertree-chat-tips img {
	width: 138px;
	height: 138px;
}
</style>
</head>
<body>
    <div class="side-bar">
        <a href="http://www.baibaox.com/book.pdf.html" class="icon-qq">QQ在线咨询</a>
        <a href="http://www.baibaox.com/book.pdf.html" class="icon-chat" title="微信公众号">微信<div class="hovertree-chat-tips"><i></i><img style="width:230px;height:350px;" src="http://www.baibaox.com/image/woyaodashang.jpg" alt="微信订阅号" /></div></a>
        <a target="_blank" href="http://www.baibaox.com/book.pdf.html" class="icon-blog">微博</a>
        <a href="http://www.baibaox.com/" class="icon-mail">mail</a>
    </div>
</body>
</html>
百宝箱网络工作室  版权所有  
站长QQ:1617818397  站长E-mail:1617818397@qq.com
Powered by www.baibaox.com  Copyright © 2011-2018
点击这里给我发消息