网站底部添加快捷导航按钮

作者:Tigh     发布于「网站相关」 - 猫雅博客

网站底部添加快捷导航按钮-猫雅博客
2019-01-21 分类:网站相关 阅读(317) 评论(0) 百度已收录
当前位置:猫雅博客 > 网站相关 > 网站相关 > 正文
赞(1) 打赏

作者:Tigh

站长QQ1165500646

手机扫码查看

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

网站底部添加快捷导航按钮

这个引用的是 Font Awesome 图标,一般模板都有吧。如果你模板里没有引用,请手动加上。

HTTP代码

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="http://www.maoyabk.cn/"> <span class="fa fa-home"></span> 首页 </a></li>
        <li> <a href="http://www.maoyabk.cn//t"> <span class="fa fa-twitch"></span> 微语 </a></li>
        <li> <a href="http://www.maoyabk.cn/"> <span class="fa fa-search"></span> 搜索 </a></li>
        <li> <a href="http://www.maoyabk.cn/103.html"> <span class="fa fa-comments"></span> 留言 </a></li>
        <li> <a href="http://www.maoyabk.cn/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代码里的链接地址、图标和名称就行了

分享到:
未经允许不得转载:

作者:Tigh, 转载或复制请以 超链接形式 并注明出处 猫雅博客
原文地址:《网站底部添加快捷导航按钮》 发布于2019-01-21

评论 抢沙发

7 + 7 =


网站底部添加快捷导航按钮

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

这绝对不是广告!

灌水说明

由于评论过多,垃圾评论日益严重,决定开始封禁不正常评论,我分享资源不欠谁,所以对于抱着敷衍不正常的评论者,很抱歉啦,本站不对你开放。

封禁列表
切换注册

登录

忘记密码 ?

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

Q Q 登 录
微 博 登 录
切换登录

注册