胜德网络科技

 找回密码
 立即注册
查看: 99|回复: 2

CSS返回顶部在线客服右侧悬浮菜单代码

[复制链接]

2

主题

9

帖子

26

积分

版主

Rank: 7Rank: 7Rank: 7

积分
26
发表于 2018-8-31 22:46:31 | 显示全部楼层 |阅读模式
<!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=UTF-8">
<title>CSS返回顶部在线客服右侧悬浮菜单代码</title>

<link href="css/index.css" rel="stylesheet" type="text/css">

</head>
<body style="height:1200px;">
<script src="/demos/googlegg.js"></script>
<div class="OnlineService_Bg">
        <div class="OnlineService_Box">
                <ul class="OnlineService_QQBox"><li><a target="_blank" rel="nofollow" href="#">懒人之家</a></li></ul>
                <div class="OnlineService_Phone"><a href="#" target="_blank">在线咨询</a></div>
                <div class="OnlineService_Sign" target="_blank">立即试用</div>
                <div class="OnlineService_Top"><a href="#">返回顶部</a></div>
        </div>
</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源:<a href="http://www.lanrenzhijia.com/" target="_blank">懒人素材</a></p>
</div>
</body>
</html>

回复

使用道具 举报

2

主题

9

帖子

26

积分

版主

Rank: 7Rank: 7Rank: 7

积分
26
 楼主| 发表于 2018-8-31 22:47:29 | 显示全部楼层
CSS文件,需要新建一个CSS文件夹。
*{margin:0;padding:0;font-family:"Microsoft YaHei";}
li{list-style:none}
img{border:none;}
/*在线客服*/
.OnlineService_Bg {width:100px;overflow:hidden;position:fixed;right:10px;bottom:20px;z-index:10;}
.OnlineService_Box {width:100%;overflow:hidden;}
.OnlineService_QQBox {width:88px;overflow:hidden;border:1px solid #cecece;margin-bottom:10px;background:#f5f5f5;}
.OnlineService_QQBox li {width:auto;height:35px;overflow:hidden;padding-left:34px;font-size:12px;line-height:35px;color:#666;background:url(icon_QQ1.png) no-repeat 5px center;cursor:pointer}
.OnlineService_QQBox li:hover {filter:alpha(opacity=50); /*IE滤镜,透明度50%*/-moz-opacity:0.5; /*Firefox私有,透明度50%*/opacity:0.5;/*其他,透明度50%*/}
.OnlineService_QQBox li a {text-decoration: none;color: #666;}
.OnlineService_Phone {width:90px;height:90px;margin-bottom:10px;}
.OnlineService_Phone a {display:block;width:90px;height:33px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;background-image:url(icon_Online.png);background-repeat:no-repeat;background-position:center 8px;cursor:pointer;text-decoration:none;color:#fff}
.OnlineService_Sign {width:90px;height:33px;margin-bottom:10px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;cursor:pointer;background-image:url(icon_Sign.png);background-repeat:no-repeat;background-position:center 10px;}
.OnlineService_Top {width:90px;height:90px;margin-bottom:10px;}
.OnlineService_Top a {display:block;width:90px;height:33px;background-color:#e33043;padding-top:57px;line-height:30px;font-size:16px;text-align:center;color:#fff;background-image:url(icon_Top.png);background-repeat:no-repeat;background-position:center 8px;cursor:pointer;text-decoration:none;color:#fff}


回复

使用道具 举报

598

主题

917

帖子

6446

积分

管理员

CEO

Rank: 9Rank: 9Rank: 9

积分
6446

最佳新人活跃会员热心会员推广达人宣传达人

QQ
发表于 2018-9-1 22:38:54 | 显示全部楼层
比较适用,谢谢友们的支持.
不抛弃不放弃
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|德哥数据中心|胜德花卉基地|胜德安防|胜德影视|胜德科技基地 ( 鄂ICP备15011170号-4 )

GMT+8, 2018-12-14 21:44 , Processed in 1.156683 second(s), 23 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表