手机建站学习：如何制作手机网站电话/短信功能

现在大多网站都会配一个手机网站，方便手机用户浏览。在手机网站底部，我们会制作一种一键拔号功能，用户只需点击图标就可以直接拔打电话。（相关教程：怎么创建WAP手机网站）如下图：

那么在自己做网站时，如何做这种手机网站一键拔号功能呢？下面学做网站论坛就来分享一下一键拔号功能制作方法。

方法/步骤

1. 将以下的HTML代码放到自己手机网站底部代码的</body>上方；（里面的小图标图片，自行从网上下载）

   
   <div class="ftkf">
   
   <ul class="clearfix">
   
   <li>
   
   <a href="tel:0108888888" mce_href="tel:01088888888">
   
   <img src="footer01.png">
   
   电话咨询
   
   </a>
   
   </li>
   
   <li>
   
   <a href="sms:88888888">
   
   <img src="footer03.png">
   
   短信咨询
   
   </a>
   
   </li>
   
   <li>
   
   <a rel="nofollow" href="mqqwpa://im/chat?chat_type=wpa&amp;uin=2399118408&amp;version=1&amp;src_type=web&amp;web_src=xuewangzhan.com">
   
   <img src="footer04.png">
   
   QQ客服
   
   </a>
   
   </li>
   
   <li>
   
   <a href="https://www.xuewangzhan.com/gonggao/6699.html">
   
   <img src="footer05.png">
   
   培训课程
   
   </a>
   
   </li>
   
   </ul>
   
   </div>
   
   

2. 将以下的CSS样式代码放到自己手机网站的CSS文件里，用于控制一键拔号功能样式；

   
   /*底部一键拔号样式**
   
   **代码来源：学做网站论坛https://www.xuewangzhan.com/**
   
   */
   
   .ftkf {padding: 1% 0.5%;background:green;z-index: 99;position: fixed;bottom: 0px;width: 100%;}
   
   .ftkf li{width:25%;text-align:center;float:left;}
   
   .ftkf li a {display: block;color: #fff;}
   
   .ftkf li img {display: block;width: 30px;height: 30px;margin: 0 auto 8px;}
   
   

3. 这样就可以在学习如何做网站时，制作出手机网站一键拔号/短信功能了。

下面顺便分享一下手机网站制作过程中，常用的功能代码：

一、直接拔号代码：

<a href="tel:0278766188" mce_href="tel:02787661888">一键拨号</a>

二、保存到手机电话本：

<a href="wtai://wp/ap;02787661888;">将02787661888存入电话簿 </a>

三、发短信代码：

<a href="sms:10000?body=你好">发短信给我</a>