在主页面添加个qq客服实现当点击图片时可以与指定QQ号的人进行聊天

Posted 2020-10-07

首先在主页面内容的最后面添加一个div

<!--QQ客服代码-->
        <style type="text/css">
            .qqkefu{ position: fixed; top: 30%; right: 0px; width:114px;height: 182px;}
        </style>
        
          <div class="qqkefu">
              <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=406762725&amp;site=qq&amp;menu=yes"><img src="images/qqjiaotan.png"/>
              </a>        
          </div>
<!--QQ客服代码结束-->

在FTP里面进行修改添加内容时：

　　在FTP中，htdocs是文件的根目录。   

　　注意： 在添加客服图片时，应该在根目录下也就是htdocs文件夹下新建一个images可以储存图片的文件夹。

在写调用路径的时候因为是在FTP上修改的，所以前面的文件路径不用写./  直接写images文件夹然后在写后面的路径。

 

 

调整对话客服的链接位置时，可以在刚添加的<div></div>上面直接使用<style></style>的内联样式来控制div在网页显示的位置。

待添加上了这个链接客服的图片的时候，先去显示网页里面查看元素查出刚添加的这个图片的宽度和高度 再使用内联样式把它设定成宽度和高度相同的图片，如果不设置，那么就默认的这个

图片的设置宽为百分之百。就有可能出位置的不理想

 

 

原理就是：

　　添加一个div在里面包含着一个a标签，a标签里面包含着<img>标签。

　　跳转到与人QQ聊天的界面使用的时固定的方法  其代码是

　　

  <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&amp;uin=406762725&amp;site=qq&amp;menu=yes">
　　　　<img src="images/qqjiaotan.png"/>
  </a>        

 

其中uin里面那一串数字写要跳转到与那人要聊天的那人的QQ号码。（以后再想再实现此功能可以直接粘贴复制再修改）。