wordpress网站移动端底部菜单栏源码

一点优化
一点优化
一点优化
478
文章
49
评论
2019年12月29日21:07:44
评论
1.5K看 1327字
前段时间,有朋友问我网站底部菜单栏咋弄的,由于七墨最近有点忙,所以今天才发出教程来。实现方法很简单,话不多说,下面直接上代码。

图片:

wordpress网站移动端底部菜单栏源码

1.添加功能代码

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

<div class=“foornav”><a href=“/”><span><img class=“lxs” src=“http://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=“http://cdn.qimok.cn/share.png” />资源分享</span></a>
<a href=“/category/web-build/”><span><img src=“http://cdn.qimok.cn/wordpress.png” />网站建设</span></a>
<a href=“/message.html”><span><img src=“http://cdn.qimok.cn/liuyan.png” />留言板</span></a>
<a href=“/model.qimok.cn/”><span><img class=“lxs” src=“http://cdn.qimok.cn/index.png” />工具箱</span></a></div>

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

2.添加样式代码

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

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

就这么简单~~

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

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