Contenu d'implémentation HTML du didacticiel du service client QQ de développement jQuery
Jetons un coup d'?il à la structure générale du service client QQ?:
Un div à gauche obtient l'effet de cliquer pour basculer entre afficher ou masquer
Le div à droite est la partie principale du contenu comprenant un titre, trois services clients QQ en ligne, ainsi qu'un numéro de téléphone et un code QR puisque nous voulons uniquement afficher. la fonction, nous n'avons pas fait de QR code.
Nous allons d'abord utiliser du HTML pour présenter grossièrement le contenu :
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="format-detection" content="telephone=no" /> <title>QQ客服</title> </head> <body > <div id="rightArrow"><a href="#" title="在線客戶"></a></div> <div id="floatDivBoxs"> <div class="floatDtt">在線客服</div> <div class="floatShadow"> <ul class="floatDqq"> <li><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在線客服1</a></li> <li><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在線客服2</a></li> <li ><a target="_blank" href="tencent://message/?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/image/477/494/683/1478309332960894.png" > 在線客服3</a></li> </ul> <div class="floatDtxt">熱線電話<br/>0551-123456789</div> </div> </div> </body> </html>
Utiliser principalement du div, et utilisez <ul>< pour la partie service client en ligne li>Implémentation
Cette page peut déjà afficher la bo?te de dialogue QQ, qui est obtenue via la ligne de code suivante
. <a target="_blank" href="tencent://message /?uin=126401073&Site=sc.chinaz.com&Menu=yes"><img src="https://img.php.cn/upload/ image/477/494/683/1478309332960894.png" > Service client en ligne 1</a>
Modifiez "uin=126401073" et vous pourrez spécifier le numéro QQ du service client
