wp 优化 / 网站建设

app 端底部菜单栏源码

言七墨 · 11月26日 · 2019年 708次已读

效果:

教程:

七墨博客
  • 添加功能代码

本站将七墨博客以下代码添加到主题选项中言七墨的编辑页脚中:

<div class="foornav"><a href="/"><span><img class="lxs" src="https://cdn.qimok.cn/index.png" />首页<span></a>
<a href="/category/%e8%b5%84%e6%ba%90%e5%85%b1%e4%ba%ab/"><span><img src="https://cdn.qimok.cn/share.png" />资源分享</span></a>
<a href="/category/web-build/"><span><img src="https://cdn.qimok.cn/wordpress.png" />网站建设</span></a>
<a href="/message.html"><span><img src="https://cdn.qimok.cn/liuyan.png" />留言板</span></a>
<a href="/model.qimok.cn/"><span><img class="lxs" src="https://cdn.qimok.cn/index.png" />工具箱</span></a></div>

注意:自行修改上面的链接和文字。

  • 添加样式代码
七墨博客

将以下代码添加到 style.css 中即可:

https://qimok.cn
.foornav{background:#eee none repeat scroll 0 0;border-top:1px solid #dcdcdc;bottombottom:0;display:none;position:fixed;width:100%;z-index:9999;height:50px}@media only screen and (max-width:700px){.footer{margin-bottom:50px}.foornav{display:block;left:0;width:100%}}.foornav span{text-align:center;font-size:10px;width:18%;display:inline-block;padding:4px 2px}.foornav span img{padding:3px;margin:0 auto;width:24px;display:block}
.breadcrumb{width:1200px;height:25px;line-height:25px;margin:0 auto;padding-left:10px}.breadcrumb{background:#fff;margin-top:5px!important;margin-bottom:5px!important}@media screen and (max-width:1200px){.breadcrumb{width:98%}}
0 条回应