给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}


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

发表评论 / Comment

用心评论~