手机网站与普通的PC网站最大的区别在于,手机网站的版面较小,有些版块不能像PC网站随意添加。例如手机网站的客服、菜单等都需要放在底部悬浮,这样既明显又不占位置了。效果如下图:
手机网站底部悬浮客服菜单制作方法(支持QQ、微信客服)
下面介绍一下手机网站底部悬浮客服菜单怎么制作,它是支持QQ、微信客服直接咨询的。
第一步:在网站底部模板(一般是footer.php或者foot.htm)里,放上以下的代码,它是手机网站底部悬浮客服菜单的显示内容。(注意修改代码里的http://url/ 为自己的网站域名,还有QQ号、微信号)
- <div class="khFooter">
- <ul class="clearfix">
- <li>
- <a href="https://www.uw7.cn/">
- <img src="http://url/tbimg/footer01.png" alt="免费课程小图标"/>
- 免费课程
- </a>
- </li>
- <li>
- <a rel="nofollow" href="mqqwpa://im/chat?chat_type=wpa&uin=4175455&version=1&src_type=web">
- <img src="http://url/tbimg/footer04.png" alt="建站客服咨询小图标"/>
- QQ咨询
- </a>
- </li>
- <li>
- <a href="javascript:void(0)" class="weixibutton">
- <img src="http://url/tbimg/footer03.png" alt="建站微信咨询小图标"/>
- 微信咨询
- </a>
- <div class="wxhao">
- 微信号:<strong>xuewangzhan</strong><br/>
- <span>(请复制加好友后咨询)</span>
- </div>
- </li>
- <li>
- <a rel="nofollow" href="https://www.uw7.cn">
- <img src="http://url/tbimg/footer05.png" alt="建站培训课程小图标"/>
- VIP课程
- </a>
- </li>
- </ul>
- </div>
复制代码 第二步:由于点击微信微信时,需要弹出微信号,所以还需要在第一步的代码下面放上以下的JS代码。
- <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
- <script type="text/javascript">
- $(".weixibutton").click(
- function(){
- $(".wxhao").toggle();
- });
- </script>
复制代码 第三步:在自己网站模板的CSS文件(一般是style.css)里放在以下的CSS代码,用于控制手机网站底部悬浮客服菜单始终位于手机网站底部,并且是悬浮状态的
- .khFooter {padding:5px 1% 0;background: #1ba2ff;z-index: 99;position: fixed;bottom: 0px;width: 100%;}
- .khFooter li{width:25%;text-align:center;float:left;position:relative;font-size:12px;}
- .khFooter li a {display: block;color: #fff;}
- .khFooter li img {display: block;width: 20px;height: 20px;margin: 0 auto;}
- .khFooter .wxhao{display:none;position:absolute;bottom:105%;font-size:1.4em;width: 500%;padding:10px;left: -250%;line-height:1.6em;text-align: center;background:#f5f5f5;}
- .khFooter .wxhao strong{font-weight:400;color:#f00;}
- .khFooter .wxhao span{font-size:0.8em;}
复制代码 第四步:下载小图标,并且在网站空间根目录下新建一个tbimg文件夹,上传小图标图片到tbimg文件夹里;
这样,通过以上的四步操作,我们就可以自己制作出手机网站底部悬浮客服菜单了。
|