EMLOG网站模板添加底部导航栏

EMLOG网站模板添加底部导航栏

EMLOG网站模板添加底部导航栏

作者: 路羽

网络资源原创分享网站

EMLOG网站模板添加底部导航栏手机扫码查看

路羽资源博客 资源分享www.luyuz.cn

EMLOG网站模板添加底部导航栏
在emlog模板中添加个底部导航栏
效果演示
添加方法将以下代码丢在所用模板footer.php标签<body>里最后即可
<!--底栏导航start-->
<style type="text/css">.nav{display:none;[email protected] only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.nav{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav img{width:50px !important;height:50px !important;}.nav > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.85);list-style-image:none;list-style-type:none;margin:0px;padding:0px !important;}.nav ul li{position:relative;float:left;width:20%;text-align:center;margin:0px;padding:0px;list-style-image:none;list-style-type:none;top:0px;left:3%;}.nav ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>
<style type="text/css">.nav{display:none;[email protected] screen and (min-width:767px){#mobile-footer{display:none}}
#mobile-footer{height:60px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999}
#mobile-menu{display:block}
#mobile-menu:after{content:'';display:block;height:0;clear:both}
#mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%}
#mobile-menu>li>a:hover{color:#000;}
#mobile-menu>li>.active{color:#000;}
#mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%}
#mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px}</style>
<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="/"> <span class="fa fa-home"></span> 首页 </a></li>
        <li> <a href="https://www.luyuz.cn/app.html"> <span class="fa fa-android"></span> 客户端 </a></li>
<li> <a href="javascript:;" class="search-show active"> <span class="fa fa-search"> </span> 搜索 </a></li>
        <li> <a href="javascript:;"class="user-reg"> <span class="fa fa-user-plus"></span> 注册 </a></li>
        <li> <a href="javascript:;" class="user-login"> <span class="fa fa-user"></span> 登录 </a></li>
</ul>
</div>
<br> <br> <br> <br>
<!--底栏导航end-->
也可放在网站后台的底部统计代码里,两种方法是一样的
关于里面按钮内容自行更改,更换相关图标获取http://www.fontawesome.com.cn/icons/
EMLOG网站模板添加底部导航栏
分享到:
打赏
未经允许不得转载:

作者: 路羽, 转载或复制请以 超链接形式 并注明出处 路羽资源博客
原文地址: 《EMLOG网站模板添加底部导航栏》 发布于2020-12-13

评论

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册