首页 > 代码库 > 右侧客服代码含电话、QQ、留言板
右侧客服代码含电话、QQ、留言板
<!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=http://www.mamicode.com/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>
右侧客服代码含电话、QQ、留言板
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。