在之前的學(xué)做網(wǎng)站論壇的網(wǎng)站建設(shè)教程中，我們講過網(wǎng)站怎么添加qq在線客服，這個(gè)教程主要介紹了如何制作PC網(wǎng)站的客服系統(tǒng)。例如學(xué)做網(wǎng)站論壇的在線客服系統(tǒng)就是按照這個(gè)方法制作的。

今天還是給建站學(xué)員再講一下如何制作客服功能，但這個(gè)客服功能是手機(jī)網(wǎng)站用的懸浮客服功能。效果如下：

這種客服系統(tǒng)是在手機(jī)網(wǎng)站上，它始終位于網(wǎng)站的底部區(qū)域，即使劃動(dòng)網(wǎng)頁，它的位置一直會片于網(wǎng)站的底部區(qū)域。這樣既不占用網(wǎng)站的版面，又能很方便讓用戶聯(lián)系客服。

下面講一下如何制作手機(jī)網(wǎng)站底部懸浮客服的方法。

1. 在自己網(wǎng)站的底部區(qū)域，找到</body>標(biāo)簽，在</body>標(biāo)簽上面插入下面的HTML代碼。（如果你對HTML一點(diǎn)不懂，可以先學(xué)習(xí)一下html視頻教程）
   <div class="kefu">
   <h3>在線咨詢</h3>
   <ul>
   <li><a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=2289556365&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.com/" rel="nofollow"><img title="點(diǎn)擊這里聯(lián)系客服李欣蓉" alt="點(diǎn)擊這里聯(lián)系客服李欣蓉" src="https://www.xuewangzhan.com/wp-content/themes/wap/images/kf1.gif" border="0" width="90%"></a></li><li>
   <a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=2399118408&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.com/" rel="nofollow"><img title="點(diǎn)擊這里聯(lián)系客服孫麗" alt="點(diǎn)擊這里聯(lián)系客服孫麗" src="https://www.xuewangzhan.com/wp-content/themes/wap/images/kf2.gif" border="0" width="90%"></a></li><li>
   <a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=1135082670&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.com/" rel="nofollow"><img title="點(diǎn)擊這里聯(lián)系客服劉淼淼" alt="點(diǎn)擊這里聯(lián)系客服劉淼淼" src="https://www.xuewangzhan.com/wp-content/themes/wap/images/kf3.gif" border="0" width="90%"></a></li><li>
   <a href="mqqwpa://im/chat?chat_type=wpa&amp;uin=2357852508&amp;version=1&amp;src_type=web&amp;web_src=https://www.xuewangzhan.com/" rel="nofollow"><img title="點(diǎn)擊這里聯(lián)系講師張啟亞" alt="點(diǎn)擊這里聯(lián)系講師張啟亞" src="https://www.xuewangzhan.com/wp-content/themes/wap/images/kf4.gif" border="0" width="90%"></a></li>
   </ul>
   </div>
2. 修改上面代碼里的客服QQ為自己網(wǎng)站的QQ號碼。它是用于放我們自己網(wǎng)站的客服的，一般放四個(gè)就可以了。
3. 放了這個(gè)DIV框之后，客服會顯示在自己做的網(wǎng)站的底部，而且是錯(cuò)位的狀態(tài)，所以我們還要加上下面的CSS樣式。（了解CSS知識，請參考CSS視頻教程）
   復(fù)制下面的CSS樣式代碼，放在自己網(wǎng)站的style.css文件的最底部。
   .kefu{width:100%;background:#69c;position:fixed;left:0;bottom:0;}
   .kefu h3{display:none;}
   .kefu li{display:inline-block;width:25%;text-align:center;height:40px;line-height:55px;}
4. 通過上面的CSS樣式就可以控制手機(jī)網(wǎng)站客服在網(wǎng)站底部懸浮顯示了。非常適用手機(jī)網(wǎng)站制作。

標(biāo)簽： isp 代碼 建站 網(wǎng)站建設(shè) 網(wǎng)站制作

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。