给WordPress网站添加好看的底部导航按钮

2017年9月30日20:32:23 8 5,879

WordPress博客网站添加好看的底部导航按钮,导航是图片的,也可以修改为文字,电脑端不显示,只在手机端显示,其它系统程序也可以用,wp鸟叔主题的把代码添加到页脚。

给WordPress网站添加好看的底部导航按钮

代码:

  1. <style type="text/css">.nav{display:none;}@media only screen and (max-width:450px){.site-info{padding:15px 0 52px 0;}#advert_widget,.php_text .widget-text,.widget .textwidget{padding:0;}.nav{position:fixed;z-index:999;bottom:0;width:100%;height:52px;display:block;right:0;box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-webkit-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-moz-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-o-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);-ms-box-shadow:0px 0px 10px 3px rgba(223,233,247,1.0);}.nav{padding-left:0;margin-bottom:0;list-style:none;}.nav img{width:50px !important;height:50px !important;}.nav > ul{position:relative;z-index:1;height:52px;background:rgba(255,255,255,.85);list-style-image:none;list-style-type:none;margin:0px;padding:0px !important;}.nav ul li{position:relative;float:left;width:20%;text-align:center;margin:0px;padding:0px;list-style-image:none;list-style-type:none;top:0px;left:3%;}.nav ul li a{display:block;margin-right:auto;margin-left:auto;}}</style>
  2. <div class="nav">
  3. <ul>
  4. <li> <a href="https://www.mom1.cn/"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5orc0s4pj202s02sq2t.jpg"></a> </li>
  5. <li> <a href="https://www.mom1.cn/ql.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5ormmj33j202s02smx1.jpg"></a> </li>
  6. <li> <a href="https://www.mom1.cn/qqo.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5onpl6ohj202s02sglh.jpg"></a> </li>
  7. <li> <a href="http://yk.mom1.cn/"><img style="animation: blink 1.0s linear infinite;" src="https://ww2.sinaimg.cn/large/a15b4afegy1fj5p5z185rj202s02s0sm.jpg"></a> </li>
  8. <li> <a href="https://www.mom1.cn/io.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fjclu2gnghj202s02s745.jpg"></a> </li>
  9. </ul>
  10. </div>

原代码由侍魂部落提供!

广告也精彩
诗梦

发表评论

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

私信 签到

目前评论:8   其中:访客  4   博主  4

    • avatar 蝈蝈静 来自天朝的朋友 谷歌浏览器 Windows 7 中国 移动 1

      诗梦你好,请问这个代码加到begin主题的那个文件里?

        • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器  Android 6.0 Redmi Note 4 Build/MRA58K 中国 移动

          @蝈蝈静 页脚小工具

        • avatar 君临天下、一统大业 来自天朝的朋友 谷歌浏览器 Windows 10 湖南省长沙市 电信 0

          请问知梦鸟那个专栏怎么改样式。。。。我琢磨了很久,琢磨不出来 :oops: ,博主看到回复一下,帮忙看看

          • avatar 神梦 来自天朝的朋友 谷歌浏览器  Android 5.1.1 OPPO A33m Build/LMY47V 天津市 电信IDC机房 0

            emmmmmm,有bug啊,诗梦,在WordPress使用后导航栏会不显示QAQ,可惜了这个。。。(另外,我的网站可能有些文章没有标注您的原文,请见谅,最近有点忙,以后加上去)

              • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器  Redmi Note 4 Build/MRA58K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36 广东省广州市 电信

                @神梦 不是跟所有主题兼容

                • avatar 诗梦 博主 来自天朝的朋友 谷歌浏览器  Android 6.0 Redmi Note 4 Build/MRA58K 广东省广州市 电信

                  @神梦 为什么要用:也许,只有真正动心了。才会为他所做的一件小事 在旁人看来无所谓,而在她看来却是心碎。

                • avatar 健哥 来自天朝的朋友 谷歌浏览器 Windows 7 天津市 电信IDC机房 0

                  如果支持二级菜单就完美了