小白安全博客

小白记忆
专注网络安全

 给emlog手机版添加好看的底部功能

FIY模板自带,个人觉得好看就扒下来了


效果截图:


php代码放在footer底部文件</footer>前面,把PHP代码里的链接换成自己的

php代码:

<div id="mobile-footer">
<ul id="mobile-menu">
<li> <a href="http://blog.xbbai.site/content/plugins/qq_login/login.php"> <span class="fa fa-user"></span> QQ登录 </a></li>
<li> <a href="http://blog.xbbai.site/t"> <span class="fa fa-info"></span> 微语 </a></li>
<li> <a href="javascript:;" class="search-show active"> <span class="fa fa-search"></span> 搜索 </a></li>
<li> <a href="http://blog.xbbai.site//gust.html"> <span class="fa fa-twitch"></span> 留言 </a></li>
<li> <a href="http://blog.xbbai.site/links.html"> <span class="fa fa-link"></span> 友链 </a></li>
</ul>
</div>



css代码:

@media screen and (max-width:800px){.author-info-dd{width:640px!important}
#mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999}
#mobile-menu{display:block!important}
.reward,.author-level,.author_zhuye,.author_ziliao{display:none!important}
.content-wrap .content_author{min-height:40px;margin-bottom: 15px; */}
.main-list{border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;}
span.copy_code{display:none;}
}
@media screen and (max-width:480px){.author-info-dd{width:380px!important}
}
@media screen and (max-width:360px){.author-info-ul li{padding:0 26px 0 26px!important}
.author-info-dd{width:260px!important}
}
#mobile-menu:after{content:';display:block;height:0;clear:both}
#mobile-menu{display:none;width:100%;height:100%}
#mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%}
#mobile-menu li.current a{color:#1bb565}
#mobile-menu>li>a{text-align:center;color:#929292;display:block;line-height:10px;height:100%}
#mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}


如果有不懂的或者不会配置的可以在下面留言


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏,请先点一下下面的付款方式

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

 您阅读这篇文章共花了:

打赏作者
版权所有,转载注明出处:小白安全博客-菜鸟安全博客-小白个人博客 » 给emlog手机版添加好看的底部功能»https://www.xiaobaibk.com/xiao-bai-185.html

发表评论

表情

网友评论(0)