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:"Micr泠贾高框osoft 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、查看效果。
