走啊走
加油

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

服务器价格表

M站底部悬浮导航代码分享,效果大概是这样的,话不多少直接上效果图吧,个人感觉M站底部加一个也是有些作用的,于是就自己写了一个,还凑合用。

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

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="/go.php?url=https://www.aliyun.com/sale-season/2020/procurement?userCode=cb3vgkf5&scm=20140722.1671.6.1693&aly_as=U-WjCGf-&accounttraceid=7fc3cf59a36b4067bad4acc1a30531c9iber&source=5176.11533457&userCode=cb3vgkf5&type=copy" 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>