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

2025-05-09 18:20:45

1、新建html文档。

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

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>

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

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}

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

7、查看效果。

CSS返回顶部在线客服右侧悬浮菜单
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢