WordPress添加移动端底部菜单栏纯代码

少羽.
少羽.
少羽.
418
文章
87
评论
2019年1月20日21:52:54 1 9,175 1122字阅读3分44秒
广告也精彩

前段时间,有朋友问我网站底部菜单栏咋弄的,由于少羽最近有点忙,所以今天才发出教程来。实现方法很简单,话不多说,下面直接上代码。WordPress添加移动端底部菜单栏纯代码

1.添加功能代码

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

<div class="foornav"><a href="URL地址"><span><img class="lxs" src="图片链接" />首页<span></a>
<a href="URL地址"><span><img src="图片链接" />资源分享</span></a>
<a href="URL地址"><span><img src="图片链接" />网站建设</span></a>
<a href="URL地址"><span><img src="图片链接" />留言板</span></a>
<a href="URL地址"><span><img class="lxs" src="图片链接" />工具箱</span></a></div>

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

2.添加样式代码

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

  1. .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}
  2. .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%}}

就这么简单~~

继续阅读
  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
广告也精彩
少羽.
  • 本文由 发表于 2019年1月20日21:52:54
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
WordPress纯代码实现独立相册功能 WordPress

WordPress纯代码实现独立相册功能

其实,这篇文章很早准备发了,一直拖,拖,拖硬生生拖到了现在,今天整合闲着,就更新一下博客吧! 想到这个文章,我忘记发了,今天就补上 hhh 正文 思路是前段时间写模板琢磨出来的,模板写废了,也不准备写...
广告也精彩
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:1   其中:访客  1   博主  0
    • 二龙博客 二龙博客 2

      赞一个,很棒。