登录  |  注册
当前位置：网站首页 > 更多 > 站长帮 > 正文

[EMLOG教程] 网站添加底部导航栏

作者：CC下载站 日期：2019-01-22 14:00:36 浏览：2596 分类：站长帮

效果图如下，代码中的网址自行修改，非常简单的一个底部导航代码，放在<footer>里即可。

[EMLOG教程] 网站添加底部导航栏

<style type="text/css">.nav{display:none;}<@media screen and (min-width:767px){#mobile-footer{display:none}}#mobile-footer{height:50px;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="http://www.dzdv.cn" class="active"> <span class="fa fa-home"></span> 首页 </a></li><li> <a href="http://www.dzdv.cn/t" class="active"> <span class="fa fa-twitch"></span> 微语 </a></li><li> <a href="javascript:;" class="search-show active"><span class="fa fa-search"></span> 搜索 </a></i><li> <a href="http://www.dzdv.cn/?post=9" class="active"> <span class="fa fa-comments"></span> 留言 </a></li><li> <a href="http://www.dzdv.cn/?plugin=register" class="active"> <span class="fa fa-info-circle"></span> 注册 </a></li></ul></div>


猜你还喜欢

您需要 登录账户 后才能发表评论

取消回复欢迎 你 发表评论:

精品推荐！
欢迎 访客 登录没有账号？
  • 最新文章
  • 热门文章
  • 热评文章
最新评论
热门tag
友情链接

关灯