零基础学做网站培训介绍

当前位置:

手机网站底部悬浮客服菜单制作方法(支持QQ、微信客服)

手机网站与普通的PC网站最大的区别在于,手机网站的版面较小,有些版块不能像PC网站随意添加。例如手机网站的客服、菜单等都需要放在底部悬浮,这样既明显又不占位置了。效果如下图:

手机网站底部悬浮客服菜单

下面介绍一下手机网站底部悬浮客服菜单怎么制作,它是支持QQ、微信客服直接咨询的。

第一步:在网站底部模板(一般是footer.php或者foot.htm)里,放上以下的代码,它是手机网站底部悬浮客服菜单的显示内容。(注意修改代码里的http://url/ 为自己的网站域名,还有QQ号、微信号)


<div class="khFooter">
<ul class="clearfix">
<li>
<a href="https://www.xuewangzhan.net/jz/zichu/">
<img src="http://url/tbimg/footer01.png" alt="免费课程小图标"/>
免费课程
</a>
</li>
<li>
<a rel="nofollow" href="mqqwpa://im/chat?chat_type=wpa&uin=2289556365&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.xuewangzhan.net/vip">
<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文件夹里;

这样,通过以上的四步操作,我们就可以自己制作出手机网站底部悬浮客服菜单了。

相关阅读:

网站如何添加各种QQ漂浮客服代码

如何给网站添加QQ在线客服

如何给自己网站添加QQ客服浮窗

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 什么是自适应手机网站 视频教程 (192853 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 什么是手机域名手机域名又叫Mobi域名。Mobi是被ICANN批准,并致力于将internet内容传送到移动装置,例如智能电话,PDA,手机等的专属域名
  • 作者: 菜鸟Email: 592604660@qq.com详细内容:我重新上传了一个模板!怎么修改Discuz x3.2 logo和底部版权信息我重新上传了一个模板!怎么
  • 在整个wordpress模板制作教程中,底部模板(footer.php)是最简单的。底部模板(footer.php)的内容主要是放一些次导航、友情链接,还有一些网站的版权信
  • 电影网站导航与大多网站一样,可以放电影,电视剧,综艺,动漫等栏目,可以通过后台设置栏目的ID即可。新增建成的时候,主导航空白的,那哪里
  • wordpress音乐插件介绍:这是一款简洁小巧的WordPress底部悬浮音乐播放器插件, 支持网易云音乐解析。可以实现在自己建网站时,放入海量的在线播放
  • 在之前的学做网站论坛的网站建设教程中,我们讲过网站怎么添加qq在线客服,这个教程主要介绍了如何制作PC网站的客服系统。例如学做网站论坛的在线客服
  • 问:如何实现鼠标停留小图片时,自动显示出一个大图片呢?就是图中这样的,谢谢了联系我时,请说是在学做网站论坛看到的,谢谢!答:
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 现在很多网站,都有这样的设置,将网站的客服QQ发布在互联网上;点击 ,任意人都可以与她聊天;寻找商机,广交朋友,这是如何做到的呢?我们如何也在自己
  • 每个销售型的网站,都会在网站上挂着漂浮的在线客服,方便用户直接咨询。这个视频演示了目前网络上特别常见的2种在线客服的使用方法。方法一:
  • Dreamweaver跳转菜单制作 视频教程 (1119292 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单,对站点访问者可见,并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • 在学做网站论坛的VIP课程中,我们讲了做网站时,我们网站的导航是调用一级分类和页面,可往往为了一些需要,登录制作wordpress下拉菜单,要求调用某个
  • 在我们的建站课程中,跟大家讲过wordprss实现导航是利用二句代码来自动调用。这样只要我们在后台添加一个分类或者页面时,会自动调用出来。
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 很多网站都有对联广告,当我们打开它的网站的时候,会在屏幕的两边自动的出现二个对联广告,显的很醒目。网站对联广告对于做cpa,cps的朋友有很大
  • 在很多的图片网站上,全使用到3d轮播图效果,可以不断的实现旋转轮播,最大气美观。效果如图:对于这样一种高大上的3D旋转轮播图,做起来并不是想
  • 仿了个单页主题免费分享大家;请张启亚老师审核。主题的淘客链接采用包装形式。首页不出现淘客链接。很适合SEO,希望大家支持。主题安装:1.
  • 香港免备案空间2G (2000M)属性详情空间机房:空间大小:2G (2000M)空间属性:PHP网站空间,ASP网站空间,全能网站
  • 对于学员做出的网站,一般要求在网站的文章底部加一个评论框功能,通过制作wordpress评论功能模板(comment.php),可以实现文字评论框,美中不足,却不
  • 需要参加学做网站论坛培训的学员,可以通过下面的几种方式支付学费并在线开通会员权限VIP学费支付方式:  【四种方式,任选一种】金融机
  • 微信的影响力越来越大,大有取代QQ之势。在自己做网站上,为了更方便用户进行交流,可以将自己的微信生成一个二维码,然后挂在自己的网站上,别人只要
  • 智能手机的普及带动了二维码的普及,通过二维码扫描可以轻松看到它深层次的信息。如何将自己的微信创建二维码,让别人扫一下就可以加我们的微信,或者