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>