<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>淡绿色右侧网页在线客服效果</title>

<style>

*{margin:;padding:;list-style:none;border:none;}

body{font-size:12px;}

a{color:#;text-decoration:none;}

/*客服代码部分*/

.qqserver .qqserver-header:after,.qqserver .qqserver-header:before,.qqserver li a:after,.qqserver li a:before{display:table;content:' '}

.qqserver .qqserver-header:after,.qqserver li a:after{clear:both}

.qqserver .qqserver-header,.qqserver li a,.tabs,.user-main,.view-category,.view-category-list>li{*zoom:}

.qqserver{position:fixed;top:%;right:;height:209px;margin-top:-104px}

.qqserver.unfold .qqserver-body{right:}

.qqserver .qqserver-body{position:absolute;right:-144px;width:122px;height:183px;padding:12px 10px;-webkit-transition:.3s cubic-bezier(.,,.,);-o-transition:.3s cubic-bezier(.,,.,);transition:.3s cubic-bezier(.,,.,);border:1px solid #62b651;border-radius:4px;background:#f4f7fa}

.qqserver .qqserver_fold{position:absolute;right:;padding:14px 7px;cursor:pointer;border-top-left-radius:4px;border-bottom-left-radius:4px;background:#70ca5d}

.qqserver .qqserver-header{padding-bottom:10px;padding-left:6px;border-bottom:1px dashed #d1d4cc}

.qqserver .qqserver-header *{float:left}

.qqserver .qqserver_arrow{margin-top:-1px;margin-left:7px;cursor:pointer}

.qqserver li{margin-top:6px}

.qqserver li a{display:block;padding:6px 12px 4px}

.qqserver li a div{font-size:14px;float:left;margin-right:11px;color:#}

.qqserver li a span{font-size:12px;line-height:18px;float:left;text-indent:4px;color:#fff}

.qqserver li a span.qqserver-service-alert{font-weight:;display:block}

.qqserver li a:hover{text-decoration:none;border-radius:4px;background:#eaebe9}

.qqserver li a:hover div{color:#62b651}

.qqserver .qqserver-footer{margin-top:10px;padding-top:14px;padding-bottom:14px;padding-left:11px;border-top:1px dashed #d1d4cc}

.qqserver .qqserver-footer .text-primary{color:#70CA5D;font-size:14px;}

.qqserver .qqserver_icon-alert{display:inline-block;margin-right:10px;vertical-align:-3px;*display:inline;*zoom:;*vertical-align:-1px}

.qqserver-header div{width:90px;height:18px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:-419px -80px}

.qqserver_icon-alert{width:16px;height:14px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:-595px -85px}

.qqserver li a span{width:30px;height:23px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:-265px 0}

.qqserver li a .qqserver-service-alert{width:30px;height:22px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:-342px 0}

.qqserver_fold div{width:26px;height:132px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:0 0}

.qqserver_fold:hover div{width:26px;height:132px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:-27px 0}

.qqserver_arrow{width:18px;height:18px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:-435px 0}

.qqserver_arrow:hover{width:18px;height:18px;background-image:url(http://demo.lanrenzhijia.com/2014/service1004/images/lanren.png);background-position:-435px -38px}

</style>

</head>

<body>

<!-- 代码部分begin -->

<div class="qqserver">

  <div class="qqserver_fold">

    <div></div>

  </div>

  <div class="qqserver-body" style="display: block;">

    <div class="qqserver-header">

      <div></div>

      <span class="qqserver_arrow"></span> </div>

    <ul>

      <li> <a title="点击这里给我发消息" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes" target="_blank">

        <div>客服咨询</div>

        <span>琳琳</span> </a> </li>

      <li> <a title="点击这里给我发消息" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes" target="_blank">

        <div>客服咨询</div>

        <span>云云</span> </a> </li>

      <li> <a title="点击这里给我发消息" href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456789&amp;site=qq&amp;menu=yes" target="_blank">

        <div>推广合作</div>

        <span class="qqserver-service-alert">单单</span> </a> </li>

    </ul>

    <div class="qqserver-footer"><span class="qqserver_icon-alert"></span><a class="text-primary" href="javascript:;">大家都在说</a> </div>

  </div>

</div>

<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>

<script>

$(function(){

    var $qqServer = $('.qqserver');

    var $qqserverFold = $('.qqserver_fold');

    var $qqserverUnfold = $('.qqserver_arrow');

    $qqserverFold.click(function(){

        $qqserverFold.hide();

        $qqServer.addClass('unfold');

    });

    $qqserverUnfold.click(function(){

        $qqServer.removeClass('unfold');

        $qqserverFold.show();

    });

    //窗体宽度小鱼1024像素时不显示客服QQ

    function resizeQQserver(){

        $qqServer[document.documentElement.clientWidth <  ? 'hide':'show']();

    }

    $(window).bind("load resize",function(){

        resizeQQserver();

    });

});

</script>

<!-- 代码部分end -->

</body>

</html>

Html_在线客服静态网页的更多相关文章

  1. 免费在线客服QQ_网页接入及使用说明

    首先,注册一个QQ (haha,我觉得也是废话) 到QQ推广的网站设置,生成代码 链接:http://shang.qq.com/v3/widget.html 选择“免费开通”,然后就会看到下图,一般只 ...

  2. QQ在线客服JS代码，自适应漂浮在网页右侧

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  3. 使用 WPF+ ASP.NET MVC 开发 在线客服系统 （一）

    近段时间利用业余时间开发了一套在线客服系统,期间遇到过大大小小不少问题,好在都一一解决,最终效果也还可以,打算写一个系列的文章把开发过程详细的记录下来. 希望能够和更多的开发人员互相交流学习,也希望有 ...

  4. QQ,MSN,Skype在线客服代码

    QQ,MSN,Skype在线客服代码 在网站建设时,为了更好的实施网站的营销型,会用到QQ,MSN等在线交流,以便客户能够快捷方便的联系我们.在这里,提供QQ,MSN的在线客服代码给大家分享: 1.Q ...

  5. .net core 和 WPF 开发升讯威在线客服与营销系统：背景和产品介绍

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf-m.shengxunwei.com ...

  6. .net core 和 WPF 开发升讯威在线客服与营销系统：使用 WebSocket 实现访客端通信

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  7. .net core 和 WPF 开发升讯威在线客服与营销系统：实现对 IE8 的完全完美支持 【干货】

    本系列文章详细介绍使用 .net core 和 WPF 开发 升讯威在线客服与营销系统 的过程.本产品已经成熟稳定并投入商用. 在线演示环境:https://kf.shengxunwei.com 注意 ...

  8. Tawk.to一键给自己的网站增加在线客服功能

    Tawk.to一键给自己的网站增加在线客服功能 很多外贸网站只有contact页面,留下邮箱.电话等联系方式,而在国际贸易当中能够及时在线交流沟通,能给客户留下更好的印象.接下来,就让我们一起来了解一 ...

  9. .net core 和 WPF 开发升讯威在线客服系统【私有化部署免费版】发布

    希望 .net 和 WPF 技术时至今日,还能有一些存在感. 这个项目源于2015年前后,当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作.WPF ...

随机推荐

  1. Maya Calendar 分类： POJ 2015-06-11 21:44 12人阅读 评论(0) 收藏

    Maya Calendar Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 70016   Accepted: 21547 D ...

  2. Sublime Text shift+ctrl妙用、Sublime Text快捷组合键大全

    Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码. 1 :按住shift+ ...

  3. VS2010常用快捷键

    ctrl + K, ctrl + F 自动调整格式(选中内容) F12 转到定义 ctrl + F12 转到声明 ctrl + tab 文档窗口转换(下一个文档窗口) alt + F6 下一个面板窗口 ...

  4. infragistcs 又

    1:UltraGrid风格设置函数 public static void ColorGrid(ref Infragistics.Win.UltraWinGrid.UltraGrid dgd) { // ...

  5. Maven向本地仓库导入官方仓库没有的jar包

    最近工程中需要用到JNotify Java包,可是在Maven公共仓库中没有找到该jar文件,下面是一个补救的办法. 以jnotify-0.94.jar为例: 需要用到Maven如下命令: mvn i ...

  6. 【SQL】SQL中笛卡尔积、内连接、外连接的数据演示

    SQL的查询语句中,常使用到内连接.外连接,以及连接的基础--笛卡尔积运算. 在简单的SQL中,也许我们还分辨清楚数据如何连接,一旦查询复杂了,脑子也犯浆糊了,迷迷糊糊的. 本文,简单以数据形式记录连 ...

  7. django cycle标签

    django 模板系统 有很多标签,其中cycle我觉得不好理解,至少网上文档也不好理解. 这些标签可以通过渲染模板文件而获得我们预期的效果和文字,常用的有如下这些标签: 标签:{% 标签名 %}{% ...

  8. 解决Bootstrap 附加导航（Affix）的问题和使用时若干注意事项

    1.要清楚Affix分别赋予的class, 开始:affix-top 达到top参数:affix 达到bottom参数:affix-bottom 2.一定要自定义这些class,否则 插件会默认给你在 ...

  9. windows10 IOT +Azure会议概要总结

    windows10 IOT +Azure会议概要总结 会议资料将放到https://channel9.msdn.com/Blogs/WinHEC FAQ:msftsziot@microsoft.com ...

  10. CodeForces 42A Guilty — to the kitchen!

     Guilty — to the kitchen! Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...