码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-08-28 11:18:39      阅读:387      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   os   java   使用   io   strong   

<!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>

 

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

标签:style   blog   http   color   os   java   使用   io   strong   

原文地址:http://www.cnblogs.com/youtianxia/p/3940977.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!