页面右侧底部悬浮层样式代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是页面右侧底部悬浮层样式代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>页面右侧底部悬浮层样式代码</title>
<link rel="stylesheet" type="text/css" href="css/gdt-style.css">
</head>
<body>
<div style="height:1000px;"></div>
<div class="side-bar"> 
	<a href="#" class="icon-qq">QQ在线咨询</a> 
	<a href="" class="icon-chat">微信<div class="chat-tips"><i></i><img style="width:138px;height:138px;" src="img/code.jpg" alt="微信订阅号"></div></a> 
	<a target="_blank" href="" class="icon-blog">微博</a> 
	<a href="mailto:admin@admin.com" class="icon-mail">mail</a> 
</div>
</body>
</html>

CSS代码(gdt-style.css):

/* Elements----------------------------------------*/
*{margin:0;padding:0;outline:0;}
.side-bar a,.chat-tips i{background-image:url(../img/gdt-img.png);background-repeat:no-repeat;}
/*右侧悬浮icon*/
.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 .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;}
.chat-tips{padding:20px;border:1px solid #d1d2d6;position:absolute;right:78px;top:-55px;background-color:#ffffff;display:none;}
.chat-tips i{width:9px;height:16px;display:inline-block;position:absolute;right:-9px;top:80px;background-position:-88px -350px;}
.chat-tips img{width:138px;height:138px;}

附件:下载该文件资源,减少时间成本(增值服务)