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
section suivante