您的位置：首页 > 编程语言

右侧客服代码含电话、QQ、留言板

2014-08-28 10:25 113 查看 
<!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" />
<meta http-equiv="x-ua-compatible" content="ie=7" />
<title>石家庄水泵厂</title>
<style>
@charset "gb2312";

body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,form,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}ol,ul,li,dl{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}.q{zoom:1;}.q:after{content:".";height:0px;clear:both;visibility:hidden;display:block;}.C-lr{clear:both; height:0px; width:auto; font-size:0px; line-height:0px; display:block;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:Verdana,arial, sans-serif;font-size:inherit;font-weight:inherit;*font-size:100%;}del,ins{text-decoration:none;}html{overflow-y:scroll;_background-image:url(about:blank);_background-attachment:fixed;_overflow-x:hidden;}

.backTop{display:block; position:fixed; right:5px; bottom:5px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-70)); width:60px; height:60px; background:#6BB0DF url(/images/back_top.png) no-repeat center; outline:none; opacity:0.9; filter:alpha(opacity=90); border-radius:8px;}
.backTop_Z{display:block; position:fixed; right:5px; bottom:5px; _position:absolute; _top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-70)); width:60px; height:60px; background:#6BB0DF url(/images/back_top_Z.png) no-repeat center; outline:none; opacity:0.9; filter:alpha(opacity=90); border-radius:8px;}
#backTop:hover{opacity:1; filter:alpha(opacity=100);}
/*banner图是否有标题*/
.banner .banner_tit{ display:none;}

.FC_PicPrice_n{ font-size:14px;}

#onService_panel{position:fixed; width:100px; right:-102px; top:25px;_position:absolute; _top:expression(eval(document.documentElement.scrollTop + 20)); z-index:20; color:#000;font-size:12px}

.online_boxs .boxs_t_l,.online_boxs .boxs_t_r,.online_boxs .boxs_b_l,.online_boxs .boxs_b_r,#onlineList .online_open,#onlineList .online_close,#onlineList small,#onlineMessage .submitBut{background-image:url(/js/qq/online_service.png);_background-image:url(/js/qq/online_service_ie6.png); background-repeat:no-repeat;}

/*--在线公用盒子样式--*/
.online_boxs .boxs_t_l,.online_boxs .boxs_t_r,.online_boxs .boxs_b_l,.online_boxs .boxs_b_r{display:block; width:10px; height:10px; position:absolute;}
.online_boxs .boxs_t_m,.online_boxs .boxs_b_m{background-image:url(/js/qq/service_panel_bg_top_b.png); background-repeat:repeat-x; margin:0px 9px; height:10px; display:block;}
.online_boxs .boxs_t,.online_boxs .boxs_b{height:10px; position:relative; overflow:hidden;}
.online_boxs .boxs_t_l,.online_boxs .boxs_b_l{left:0px; top:0px;}
.online_boxs .boxs_t_l{background-position:-79px -39px;}
.online_boxs .boxs_t_r{background-position:-89px -39px;}
.online_boxs .boxs_t_r,.online_boxs .boxs_b_r{right:0px; top:0px;}
.online_boxs .boxs_b_l{background-position:-79px -49px;}
.online_boxs .boxs_b_r{background-position:-89px -49px;}
.online_boxs .boxs_t_m{background-position:0px 0px;}
.online_boxs .boxs_b_m{background-position:0px -10px;}
.online_boxs .boxs_m_l,.online_boxs .boxs_m_r{background-image:url(/js/qq/service_panel_bg_left_b.png); background-repeat:repeat-y;}
.online_boxs .boxs_m_l{background-position:left 0; padding-left:10px; }
.online_boxs .boxs_m_r{ background-position:right 0; padding-right:10px;}
.online_boxs .box_m_m{background-color:#f1f1f1; min-height:10px; _height:10px;}
/*---在线客服内部样式---*/
#onlineList{padding:20px 1px 1px; position:relative; z-index:1;}
/*--在线客服打开关闭按钮--*/
#onlineList .online_open{width:35px; height:146px; background-position:0 -39px; position:absolute; left:-45px; top:35%; overflow:hidden;cursor:pointer; }
#onlineList .online_open_en{background-position:0 -239px;}
#onlineList .online_open_f{background-position:0 -390px;}
#onlineList .online_open:hover{background-position:-37px -39px;}
#onlineList .online_open_en:hover{background-position:-37px -239px;}
#onlineList .online_open_f:hover{background-position:-37px -390px;}
#onlineList .online_close{display:block; width:16px; height:16px; background-position:-68px -16px; position:absolute; top:-0px; left:0px; cursor:pointer;}
#onlineList .online_close:hover{background-position:-84px -16px;}
/*--在线客服图标--*/
#onlineList .online_icon{margin-bottom:10px; border-radius:5px; padding:5px 0 0; cursor:pointer;}
#onlineList .online_icon:hover{background-color:#ddd;}
#onlineList .pic,#onlineList .name{display:block; text-align:center;}
#onlineList .name{font:700 14px/24px "微软雅黑","Microsoft Yahei";}

/*--在线客服tab--*/
#onlineList .online_tab{position:absolute; display:none;}
#onlineList .online_tab_c{position:relative;}
#onlineList .online_tab_c small{display:block; position:absolute; }
#onlineList .online_tab_c small.sanjiao{width:36px; height:36px; right:-42px; background-position:-6px 0px; overflow:hidden;}
#onlineList .online_tab_c small.tab_close{background-position:-68px 0px; right:-5px; top:-5px; width:16px; height:16px; cursor:pointer;}
#onlineList .online_tab_c small.tab_close:hover{background-position:-84px 0px;}

#onlineTelTab{right:100px; top:0px; width:240px;}
#onlineTel small{top:30px;}
#onlineTel dt{font:700 14px/30px "微软雅黑";}
#onlineTel dd{line-height:24px;}

#onlineQQTab{right:100px; top:100px; width:96px;}
#onlineQQ{min-height:80px; _height:80px;}
#onlineQQ small{top:30px;}
#onlineQQ dt{font:700 14px/30px "微软雅黑"; text-align:center;}
#onlineQQ dd{line-height:24px;}

#onlineMessageTab{right:100px; top:200px; width:340px;}
#onlineMessage{min-height:80px; _height:80px;}
#onlineMessage small{top:30px;}
#onlineMessage dl{padding-top:15px;}
#onlineMessage dt textarea{width:310px; height:70px; padding:4px; border:1px solid #bfbfbf;}
#onlineMessage dd{height:30px;}
#onlineMessage dd.text_length{text-align:right; line-height:30px;}
#onlineMessage label{display:block; width:60px; line-height:26px; float:left;}
#onlineMessage .text_input{height:22px; border:1px solid #bfbfbf; width:158px; line-height:22px; margin-top:1px;}
#onlineMessage .submitBut{width:84px; height:25px; background-position:0px -186px; border:0px; color:#383838; margin-left:10px; cursor:pointer;}
#onlineMessage .submitBut:hover{ background-position:0px -212px;}</style>
<script language="javascript" src="/js/qq/jquery-1.7.1.min.js"></script>

</head>
<body>

<!-- 代码开始 -->

<div id="onService_panel">
<div class="onService_panel_s">
<div class="online_boxs">
<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
<div class="boxs_m_l">
<div class="boxs_m_r">
<div class="box_m_m">
<div id="onlineList">
<em class="online_close" id="onlineClose" title="关闭"></em>
<div class="online_open  " id="onlineOpen"></div>
<div id="online_tel_icon" class="online_icon">
<span class="pic"><img src="/js/qq/online_tel.png" /></span>
<span class="name">咨询热线</span>
</div>
<div id="online_qq_icon" class="online_icon">
<span class="pic"><img src="/js/qq/online_qq.png" /></span>
<span class="name">在线客服</span>
</div>
<div id="online_message_icon" class="online_icon">
<span class="pic"><img src="/js/qq/online_message.png" /></span>
<span class="name">在线预约</span>
</div>

<div id="online_address_icon" class="online_icon">
<span class="pic"><a href="http://down.admin5.com/" target="_blank"><img src="/js/qq/online_address.png" /></a></span>
<span class="name">交通路线</span>
</div>
<div id="onlineTelTab" class="online_tab">
<div class="online_boxs">
<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
<div class="boxs_m_l">
<div class="boxs_m_r">
<div class="box_m_m">
<div id="onlineTel" class="online_tab_c">
<small class="sanjiao"></small><small class="tab_close"></small>
<dl>
<dt><strong>咨询热线</strong></dt>
<dd><strong>联系人：</strong><span>王经理</span></dd>                                                <dd><strong>电话：</strong><span>010-123456</span></dd>                                                                      </dl>
</div>
</div>
</div>
</div>
<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
</div>
</div>
<div id="onlineQQTab" class="online_tab">
<div class="online_boxs">
<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
<div class="boxs_m_l">
<div class="boxs_m_r">
<div class="box_m_m">
<div id="onlineQQ" class="online_tab_c">
<small class="sanjiao"></small><small class="tab_close"></small>
<dl>
<dt>经理 </dt>
<dd>
<a target="_blank" href="http://wpa.qq.com/msgrd?V=3&uin=1322628951&site=liuyanbao.net&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1322628951:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</dd>
<dt>销售 </dt>
<dd>
<a target="_blank" href="http://wpa.qq.com/msgrd?V=3&uin=1322628951&site=liuyanbao.net&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1322628951:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
</dd>
</dl>
</div>
</div>
</div>
</div>
<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
</div>
</div>
<div id="onlineMessageTab" class="online_tab">
<div class="online_boxs">
<div class="boxs_t"><span class="boxs_t_l"></span><span class="boxs_t_m"></span><span class="boxs_t_r"></span></div>
<div class="boxs_m_l">
<div class="boxs_m_r">
<div class="box_m_m">
<div id="onlineMessage" class="online_tab_c">
<small class="sanjiao"></small><small class="tab_close"></small>
<dl>

<span class="name">在线预约</span>

<form onsubmit=document.getElementById("url").value=window.location.host; name="myform" method="post" target="_blank" enctype="multipart/form-data" action="http://login.liuyanbao.net/index.php?action=savecontent" accept-charset="GB2312" onsubmit="if(isIE)document.charset='GB2312'">
<input type="hidden" name="fid" value="288" />
<input type="hidden" name="guishu" value="44" />
<input type="hidden" name="url" value="" id="url"/>

<dd><label>姓名：</label><input type="text" name="content[0]" value="" /></dd>
<dd><label>Q Q：</label><input type="text" name="content[1]" value="" /></dd>
<dd><label>需求：</label><select name="content[2]"><option value="需求选择">需求选择</option><option value="使用帮助">使用帮助</option><option value="意见建议">意见建议</option><option value="合作发展">合作发展</option></select></dd>
<dd><label>评价：</label><select name="content[3]"><option value="系统评价">系统评价</option><option value="优秀">优秀</option><option value="一般">一般</option><option value="不好">不好</option></select><input type="submit" name="submitcontent" value="提交"></dd>
</form>

<p align="right"><a href="http://www.jm880.cn">点击免费申请留言板</a></p>

</dl>
</div>
</div>
</div>
</div>
<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="boxs_b"><span class="boxs_b_l"></span><span class="boxs_b_m"></span><span class="boxs_b_r"></span></div>
</div>
</div>
</div>
<script language="javascript" src="/js/qq/online.js"></script>
<p>本例所需要的脚本:看不到效果请刷新网页,当然,在你实际使用时不会出现这样的情况<br/>
<a href="/js/qq/jquery-1.7.1.min.js">jquery-1.7.1.min.js</a><br/>
<a href="/js/qq/online.js">online.js</a></p>
<!-- 代码结束 -->

<br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />

<br />
<br />
<br />
<br />
<br />
<br />
<br />

<div style="text-align:center">
</div>

</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航