全部模版
新手必读
常见问题
更新日志
技术总结

常用手机端底部按钮

作者: admin2020-12-25
< div class="tools-wap" >
    <div class="tools-item tools-item-tel">
        <a href="tel:{dede:global.cfg_tel/}" class="tel service-tel-link"><i class="icon icon-tel"></i><span>电话报修</span><label class="service-tel-text">400-999-3205</label></a>
    </div>
    <div class="tools-item tools-item-im">
        <a href="tel:{dede:global.cfg_tel/}" target="_blank" class="im service-talk-link"><i class="icon icon-im"></i><span>在线预约</span></a>
    </div>
    <div class="tools-item tools-item-order">
        <a href="tel:{dede:global.cfg_tel/}" target="_blank" class="order"><i class="icon icon-order"></i><span>自助预约</span></a>
    </div>
< /div > 
 
< style type="text/css" >
/* wap底部工具栏 */
.tools-space { display: block; margin: 0 auto; width: 100%; height: 49px; border: none; }
.tools-wap { z-index: 1000; position: fixed; left: 0; bottom: 0; margin: 0 auto; width: 100%; height: 49px; font-size: 0; border: none; background: #ffffff; }
.tools-wap .tools-item { position:relative; display: inline-block; width: 33.33%; height: 100%; vertical-align: bottom; }
.tools-wap .tools-item.tools-item-tel { background-color: #0F67A7; }
.tools-wap .tools-item.tools-item-im { background-color: #C31E1E; }
.tools-wap .tools-item.tools-item-order { background-color: #ff9908; }
.tools-wap .tools-item a { position:relative; display: block; width: 100%; height: 100%; text-align: center; }
.tools-wap .tools-item a span { color:#fff; font-size: 17px; line-height: 49px; }
.tools-wap .tools-item a i.icon { display: inline-block; position: relative; margin-right: 6px; top: 6px; width: 24px; height: 24px; }
.tools-wap .tools-item a i.icon-tel { background: url(/skin/images/icon-tel.png) no-repeat 0 0; background-size: 100%; }
.tools-wap .tools-item a i.icon-im { background: url(/skin/images/icon-im.png) no-repeat 0 0; background-size: 100%; }
.tools-wap .tools-item a i.icon-order { background: url(/skin/images/icon-order.png) no-repeat 0 0; background-size: 100%; }
.tools-wap .tools-item a.tel,
.tools-wap .tools-item a.im {-moz-animation: myfirst 1s infinite;-webkit-animation: myfirst 1s infinite;-o-animation: myfirst 1s infinite;animation: myfirst 1s infinite;}
@keyframes myfirst { 0%{transform: scale(.85); } 50%{transform: scale(1);} 100%{transform: scale(.85);}}
@-moz-keyframes myfirst { 0%{-moz-transform: scale(.85);} 50%{-moz-transform: scale(1);} 100%{-moz-transform: scale(.85);}}
@-webkit-keyframes myfirst { 0%{-webkit-transform: scale(.85);} 50%{-webkit-transform: scale(1);} 100%{-webkit-transform: scale(.85);}}
@-o-keyframes myfirst { 0%{-o-transform: scale(.85);} 50%{-o-transform: scale(1); } 100%{-o-transform: scale(.85);}}
< /style >
       
Copyright © 2018-2028 鲲鹏网络工作室 版权所有      ICP备案号:黔ICP备25002801号-2
QQ在线咨询