Funs

给网站加个底栏
效果图如下,代码中的网址自行修改,非常简单的一个底部导航代码,放在<footer>里即可。<st...
扫描右侧二维码阅读全文
02
2019/03

给网站加个底栏

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


<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="链接" class="active"> <span class="fa fa-home"></span> 首页 </a></li>
<li> <a href="链接" 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="链接l" class="active"> <span class="fa fa-comments"></span> 留言 </a></li>
<li> <a href="链接" class="active"> <span class="fa fa-info-circle"></span> 注册 </a></li>
</ul>
</div>
Last modification:March 2nd, 2019 at 10:37 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

4 comments

  1. 左岸

    简直要和我一样水了

    1. Funs
      @左岸

      哈哈,不知道写什么了,只好水文维持生活

  2. 演员

    不错!

    1. Funs
      @演员

      谢谢老哥