手机建站学习:如何制作手机网站电话/短信功能
现在大多网站都会配一个手机网站,方便手机用户浏览。在手机网站底部,我们会制作一种一键拔号功能,用户只需点击图标就可以直接拔打电话。(相关教程:怎么创建WAP手机网站)如下图:
那么在自己做网站时,如何做这种手机网站一键拔号功能呢?下面学做网站论坛就来分享一下一键拔号功能制作方法。
方法/步骤
- 将以下的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&uin=2399118408&version=1&src_type=web&web_src=xuewangzhan.net">
<img src="footer04.png">
QQ客服
</a>
</li>
<li>
<a href="https://www.xuewangzhan.net/gonggao/6699.html">
<img src="footer05.png">
培训课程
</a>
</li>
</ul>
</div> - 将以下的CSS样式代码放到自己手机网站的CSS文件里,用于控制一键拔号功能样式;
/*底部一键拔号样式**
**代码来源:学做网站论坛https://www.xuewangzhan.net/**
*/
.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;} - 这样就可以在学习如何做网站时,制作出手机网站一键拔号/短信功能了。
下面顺便分享一下手机网站制作过程中,常用的功能代码:
一、直接拔号代码:
<a href="tel:0278766188" mce_href="tel:02787661888">一键拨号</a>
二、保存到手机电话本:
<a href="wtai://wp/ap;02787661888;">将02787661888存入电话簿 </a>
三、发短信代码:
<a href="sms:10000?body=你好">发短信给我</a>