{mtitle title=” 第一步-引入css “/}

我们需要引入一个外部CSS文件来定义底部导航栏的样式。这里我们使用的是一个CDN链接，确保了样式的快速加载和更新

{hide}

<link href="https://cdn.heylie.cn/css/dwo_cc.css" rel="stylesheet">

{/hide}

{mtitle title=” 第二步-粘贴前端html代码 “/}

地址参考：../Joe/public/footer.php

{hide}

<div id="mobile-footer">
    <ul id="mobile-menu">
        <li> <a href="https://blog.heylie.cn/"> <span class="iconfont icon-Home1"></span> 首页 </a></li>
        <li> <a href="https://blog.heylie.cn/links.html"> <span class="iconfont icon-links"></span> 友链 </a></li>
        <li> <a href="https://blog.heylie.cn/trendi.html"> <span class="iconfont icon-trendi"></span> 热搜 </a></li>
        <li> <a href="https://blog.heylie.cn/music.html"> <span class="iconfont icon-music"></span> 音乐 </a></li>
        <li> <a href="https://heylie.cn"> <span class="iconfont icon-Home"></span> 故渊渡 </a></li>
             </ul>
</div>   

{/hide}

{mtitle title=” 图标问题！！！ “/}

如果没有用本站顶部图标的需要自己引入图标

• 参考一： 本站顶部的图标，图标内容看： 主题美化指南：自定义顶部图标设计与实现

<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4470129_sh9ssbfalv.css">

• 参考二： 自己去iconfont 找喜欢的然后引用，不会可以百度或点击底部QQ

总结

• 将上述代码添加到您的博客主题的底部位置
• 这段代码定义了一个包含五个链接的底部导航栏
• 每个链接都有一个图标和一个文本标签。

版权声明

   站内部分内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供网络资源分享服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请 联系我们 一经核实，立即删除。并对发布账号进行永久封禁处理。在为用户提供最好的产品同时，保证优秀的服务质量。

---

本站仅提供信息存储空间,不拥有所有权,不承担相关法律责任。