学做网站培训课程介绍

当前位置:

如何制作手机网站底部悬浮客服

在之前的学做网站论坛的网站建设教程中,我们讲过网站怎么添加qq在线客服,这个教程主要介绍了如何制作PC网站的客服系统。例如学做网站论坛的在线客服系统就是按照这个方法制作的。

今天还是给建站学员再讲一下如何制作客服功能,但这个客服功能是手机网站用的悬浮客服功能。效果如下:

手机网站底部悬浮客服

这种客服系统是在手机网站上,它始终位于网站的底部区域,即使划动网页,它的位置一直会片于网站的底部区域。这样既不占用网站的版面,又能很方便让用户联系客服。(也可以直接安装响应式WordPress网站在线客服插件达到相同的效果)

下面讲一下如何制作手机网站底部悬浮客服的方法

  1. 在自己网站的底部区域,找到</body>标签,在</body>标签上面插入下面的HTML代码。(如果你对HTML一点不懂,可以先学习一下html视频教程
    <div class="kefu">
    <h3>在线咨询</h3>
    <ul>
    <li><a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=2289556365&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.net/" rel="nofollow"><img title="点击这里联系客服李欣蓉" alt="点击这里联系客服李欣蓉" src="https://www.xuewangzhan.net/wp-content/themes/wap/images/kf1.gif" border="0" width="90%"></a></li><li>
    <a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=2399118408&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.net/" rel="nofollow"><img title="点击这里联系客服孙丽" alt="点击这里联系客服孙丽" src="https://www.xuewangzhan.net/wp-content/themes/wap/images/kf2.gif" border="0" width="90%"></a></li><li>
    <a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=1135082670&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.net/" rel="nofollow"><img title="点击这里联系客服刘淼淼" alt="点击这里联系客服刘淼淼" src="https://www.xuewangzhan.net/wp-content/themes/wap/images/kf3.gif" border="0" width="90%"></a></li><li>
    <a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=2357852508&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.net/" rel="nofollow"><img title="点击这里联系讲师张启亚" alt="点击这里联系讲师张启亚" src="https://www.xuewangzhan.net/wp-content/themes/wap/images/kf4.gif" border="0" width="90%"></a></li>
    </ul>
    </div>
  2. 修改上面代码里的客服QQ为自己网站的QQ号码。它是用于放我们自己网站的客服的,一般放四个就可以了。
  3. 放了这个DIV框之后,客服会显示在自己做的网站的底部,而且是错位的状态,所以我们还要加上下面的CSS样式。(了解CSS知识,请参考CSS视频教程
    复制下面的CSS样式代码,放在自己网站的style.css文件的特别底部。

    .kefu{width:100%;background:#69c;position:fixed;left:0;bottom:0;}
    .kefu h3{display:none;}
    .kefu li{display:inline-block;width:25%;text-align:center;height:40px;line-height:55px;}
  4. 通过上面的CSS样式就可以控制手机网站客服在网站底部悬浮显示了。特别适用手机网站制作

发表评论

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

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 什么是自适应手机网站 视频教程 (1103311 次浏览)
    以下为学做网站论坛关于“什么是自适应手机网站”讲解视频教程。
  • 老师你好,我前几天一直在学习手机站课程,对于课程中的案例网站特别喜欢,自己就跟着课程一步步做了一遍。也做了课程笔记,感觉学到了很多知识。
  • 作者: 菜鸟Email: 592604660@qq.com详细内容:我重新上传了一个模板!怎么修改Discuz x3.2 logo和底部版权信息我重新上传了一个模板!怎么
  • 在整个wordpress模板制作教程中,底部模板(footer.php)是最简单的。底部模板(footer.php)的内容主要是放一些次导航、友情链接,还有一些网站的版权信
  • wordpress音乐插件介绍:这是一款简洁小巧的WordPress底部悬浮音乐播放器插件, 支持网易云音乐解析。可以实现在自己建网站时,放入海量的在线播放
  • 在之前的学做网站论坛的网站建设教程中,我们讲过网站怎么添加qq在线客服,这个教程主要介绍了如何制作PC网站的客服系统。例如学做网站论坛的在线客服
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 现在很多网站,都有这样的设置,将网站的客服QQ发布在互联网上;点击 ,任意人都可以与她聊天;寻找商机,广交朋友,这是如何做到的呢?我们如何也在自己