{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
总结
- 将上述代码添加到您的博客主题的底部位置
- 这段代码定义了一个包含五个链接的底部导航栏
- 每个链接都有一个图标和一个文本标签。
THE END
请登录后发表评论
注册
社交账号登录