首页 工作时间 9:00-17:30 关注我们
当前位置:首页 > 建站百科 > 实验室 >

移动端底部滑动菜单样式

来源: 九度工作室 阅读:次 时间:18-08-09 10:58

效果:


 
样式:

<style type="text/css">
#fotmswt{ position:fixed; bottom:0;height:88px; width:100%; text-align:center;background: url(images/fotmswt_bg.png) ; z-index:99999999999999;}
#fotmswt a{ width:19.2%; display:block; float:left;text-align:center; font-size:16px;color:#fff; text-decoration:none;}
#fotmswt a:hover,.ft a.a{ }
#fotmswt a span{ display:block; width:65px; height:60px;line-height: 4.5rem; margin:0 auto;}
#fotmswt a dl{ display:block; width:78px;  margin:0 auto;margin-top:-20px;margin-left:3px;}
#fotmswt a em{ display:block; width:38px; height:42px; margin:0 auto;background:url(./themes/default/images/nav.png) no-repeat 0 0;}
#fotmswt a .n2{ background-position:0 -44px;}
#fotmswt a .n3 img{margin:0 auto;}
#fotmswt a .n4{ background-position:0 -132px; position:relative;}
#fotmswt a .n5{ background-position:0 -176px;}
#fotmswt a .n4 b{ position:absolute; top:5px; right:-18px; display:block;height:18px; width:18px; text-align:center;line-height: 18px; border-radius: 10px; background: #C70600; color:#fff; font-style:normal; text-indent:1px; font-size:12px; font-weight:400;}
</style>

 
<div id="fotmswt">
<a class="a" href="/"><span>首页 &nbsp;&nbsp;|</span></a> <a href="tel:000000000"><span>免费电话</span></a>
<dl>
</dl>
<a href="/anli/"><span>&nbsp; 案例 &nbsp;&nbsp;|</span></a> <a href="javascript:void(0)" onclick="KS.openChatWin('');"><span>免费咨询</span></a></div>