零基础建站培训教程介绍

当前位置:

怎么制作可折叠式在线客服框

我们做网站后,为了让用户更方便的与我们联系,往往需要在自己网站上添加一个在线客服框。在前面的建站教程中,我们介绍了很多在线客服框的制作方法,今天学做网站论坛分享一种可折叠式在线客服框制作方法。

先看下效果:

折叠前效果

折叠后效果

方法与步骤

  1. 将以下的HTML代码放到自己网站的底部模板</body> 标签上方;
    
    
    <!--代码来源:学做网站论坛https://www.xuewangzhan.net/-->
    <div id="fdrdiv">
        <div id="bigg" style="color: rgb(0, 119, 195); font-size: 34px; position: absolute; top: -38px; right: 0px; display: none;" onclick="bigg()">+</div>
        <div id="smalll" style="color: rgb(0, 119, 195); font-size: 34px; position: absolute; top: -39px; right: 0px; display: block;" onclick="smalll()">-</div>
        <div id="fdrtit" style="display: block;">在线客服</div>
        <div id="fdrlist" style="display: block;">
            <ul>
        <li>
          <span>微信1
          <b>pujiws</b></span>
          <span><img src="https://www.pujiws.com/images/pjlx_07.jpg" alt="二唯码" /></span>
          </li>
          <li>
          <span>微信2 <b>pujiws2</b></span>
          <span><img src="https://www.pujiws.com/images/pjlx_07.jpg" alt="二唯码" /></span>
          </li>
        <li><span>QQ<b><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1322347026&amp;site=pujiws.com&amp;menu=yes" target="_blank" class="kfqq">1322347026</a></b> <b><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=65774512&amp;site=pujiws.com&amp;menu=yes" target="_blank" class="kfqq">65774512</a></b>
        </span></li>

      </ul>
        </div>
    </div>
  2. 将以下的CSS样式代码放到自己的CSS文件中,用于控制可折叠式在线客服框样式;
    
    
    #fdrdiv {width:110px;-moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;position: fixed;top: 33%;right: 10px; border:1px solid #0077c3;background:#fff; -moz-box-shadow:2px 2px 2px #ccc; -webkit-box-shadow:2px 2px 2px #ccc; box-shadow:2px 2px 2px #ccc; z-index:99999999;font-family: microsoft yahei,Arial, Helvetica, sans-serif;
        -webkit-font-smoothing: antialiased;}
    #fdrtit { font-weight:bold; color:#fff; text-align:center;background:#0077c3; line-height:1.5em; padding:5px; font-size:1.05em; border-bottom:solid 1px #4bbc2e;font-size: 14px;}
    #fdrlist {padding:5px 10px;}
    #fdrlist ul li { overflow:hidden; padding:0px 0px; text-align:center; font-size:1.15em;}
    #fdrlist ul li a,#fdrlist ul li span { display:block;word-wrap:break-word ;word-break: break-all;}
    #fdrlist ul li span { padding:3px 0px; font-size:13px;}
    #fdrlist ul li a { padding:5px 0px;}
    #fdrlist li img{border: none;  height: auto;  width: 100%;}
    .kfqq{color:#4f4f4f;}
  3. 将以下的JS代码也放到网站的底部模板</body> 标签上方;
    
    
    <script>
    function bigg(){
        var fdrtit=document.getElementById("fdrtit");fdrtit.style.display='block';
        var fdrlist=document.getElementById("fdrlist");fdrlist.style.display='block';
        var biggg=document.getElementById("bigg");biggg.style.display='none';
        var smallll=document.getElementById("smalll");smallll.style.display='block';
    }
    function smalll(){
        var fdrdiv=document.getElementById("fdrdiv");fdrdiv.style.border='none';
        var fdrtit=document.getElementById("fdrtit");fdrtit.style.display='none';
        var fdrlist=document.getElementById("fdrlist");fdrlist.style.display='none';
        var smallll=document.getElementById("smalll");smallll.style.display='none';
        var biggg=document.getElementById("bigg");biggg.style.display='block';
    }
    </script>

通过这三段代码,就可以在自己做网站时,制作出可折叠式在线客服框了。

发表评论

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