这个引用的是 Font Awesome 图标,一般模板都有吧。如果你模板里没有引用,请手动加上。
html代码:
<div id="mobile-footer"> <ul id="mobile-menu"> <li> <a href="https://www.upmumu.com"> <span class="fa fa-home"></span> 首页 </a></li> <li> <a href="https://www.upmumu.com/t"> <span class="fa fa-twitch"></span> 微语 </a></li> <li> <a href="https://www.upmumu.com"> <span class="fa fa-search"></span> 搜索 </a></li> <li> <a href="https://www.upmumu.com/liuyan.html"> <span class="fa fa-comments"></span> 留言 </a></li> <li> <a href="https://www.upmumu.com/guanyu.html"> <span class="fa fa-info-circle"></span> 关于 </a></li> </ul> </div>
css代码:
@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}
使用方法
1、把html代码放入 footer.php
2、把css代码放入你模板的css文件里
3、修改一下html代码里的链接地址、图标和名称就行了
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END
喜欢就支持一下吧