M站底部固定悬浮导航代码分享

M站底部悬浮导航代码分享，效果大概是这样的，话不多少直接上效果图吧，个人感觉M站底部加一个也是有些作用的，于是就自己写了一个，还凑合用。效果图预览地址：https://zouaw.com/7058.html

M站底部悬浮导航代码分享

代码如下：

 

<style>
/*2020年3月22日17:44:07 cc*/
.foot_content{display:none;}
@media(max-width: 1200px) {
.foot_content{display:flex;position:fixed;bottom:0px;left:0px;width:100%;text-align:center;z-index:9999;background:#fff;}
.foot_content a{text-decoration:none;}
.foot_content .foot_item{border-right:1px solid #eee;border-top:1px solid #eee;flex:1;height:44px;padding-top:3px;padding-bottom:4px;}
.foot_content .foot_item img{padding:0;width:26%;height:auto;max-width:30px;}
.foot_content .foot_item p{padding:0;margin:0;color:#666;font-size:13px;}
}
</style>
<div class="foot_content">
<div class="foot_item"><a href="/?from=bottom" target="_blank"><img src="/wp-content/uploads/2020/03/indexpic.png"><p>首页</p></a></div>
<div class="foot_item"><a href="https://www.aliyun.com/minisite/goods?userCode=cb3vgkf5" target="_blank"><img src="/wp-content/uploads/2020/03/云主机.png"><p>买主机</p></a></div>
<div class="foot_item"><a href="/wp-content/uploads/2018/10/微信图片_20181020215728-300x300.jpg" target="_blank"><img src="/wp-content/uploads/2020/03/送门户网站.png"><p>建站</p></a></div>
<div class="foot_item"><a href="/aboutus-html" target="_blank"><img src="/wp-content/uploads/2020/03/联系.png"><p>联系</p></a></div>
</div>