CSS返回顶部在线客服右侧悬浮菜单
1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。
<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" onclick="#">立即试用</div>
<div class="OnlineService_Top"><a href="#">返回顶部</a></div>
</div>
</div>
4、书写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_Box {width:88px;overflow:hidden;border:1px solid #cecece;margin-bottom:10px;background:#f5f5f5;}
.OnlineService_Box li {width:auto;height:35px;overflow:hidden;padding-left:34px;font-size:12px;line-height:35px;color:#666;background:url(icon_1.png) no-repeat 5px center;cursor:pointer}
.OnlineService_Box li:hover {filter:alpha(opacity=50); /*IE滤镜，透明度50%*/-moz-opacity:0.5; /*Firefox私有，透明度50%*/opacity:0.5;/*其他，透明度50%*/}
.OnlineService_Box li a {text-decoration: none;color: #666;}
5、书写客服css代码。
.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}
6、代码整体结构。
7、查看效果。
