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

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

代码:

  <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:9999;
bottom:0;
width:100%;
height:52px;
display:block;
right: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,0.9); 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>
<div class=”nav”>
<ul>
<li> <a href=”https://teelm.com/”><img src=”https://teelm.com/wp-content/uploads/2018/03/首页.png”></a> </li>
<li> <a href=”https://teelm.com/notice/%e6%9c%ac%e7%ab%99%e5%85%ac%e5%91%8a/”><img src=”https://teelm.com/wp-content/uploads/2018/03/博客.png”></a> </li>
<li> <a href=”https:/teelm.com/%e5%8f%8b%e6%83%85%e9%93%be%e6%8e%a5.html/”><img src=”https://teelm.com/wp-content/uploads/2018/03/友链.png”></a> </li>
<li> <a href=”https://teelm.com/2018/03/01/%e7%95%99%e8%a8%80%e6%9d%bf/”><img src=”https://teelm.com/wp-content/uploads/2018/03/留言.png”></a> </li>
</ul>
</div>

原代码由侍魂部落提供!

给TA买糖
共{{data.count}}人
人已赞赏
Wordpress

Teelm Blog将逐步完善,逐步加大资讯量

2018-2-24 11:41:09

Wordpress

室内设计·门头设计

2018-3-5 19:25:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 744 用户总数
  • 1280 文章总数
  • 1637234 浏览总数
  • 0 今日发布
  • 1394 稳定运行
立即加入

加入幂构社区VIP,快速免费获取优质资源!

QQ在线咨询