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

管理员
管理员
管理员
243
文章
27
评论
2018年3月3日08:15:44 评论 1,133 1411字

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 rel="external nofollow" target="_blank" href="https://www.teelm.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly90ZWVsbS5jb20v"><img src="https://teelm.com/wp-content/uploads/2018/03/首页.png"></a> </li>
<li> <a rel="external nofollow" target="_blank" href="https://www.teelm.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly90ZWVsbS5jb20vbm90aWNlLyVlNiU5YyVhYyVlNyVhYiU5OSVlNSU4NSVhYyVlNSU5MSU4YS8="><img src="https://teelm.com/wp-content/uploads/2018/03/博客.png"></a> </li>
<li> <a rel="external nofollow" target="_blank" href="https://www.teelm.com/wp-content/themes/begin/go.php?url=aHR0cHM6L3RlZWxtLmNvbS8lZTUlOGYlOGIlZTYlODMlODUlZTklOTMlYmUlZTYlOGUlYTUuaHRtbC8="><img src="https://teelm.com/wp-content/uploads/2018/03/友链.png"></a> </li>
<li> <a rel="external nofollow" target="_blank" href="https://www.teelm.com/wp-content/themes/begin/go.php?url=aHR0cHM6Ly90ZWVsbS5jb20vMjAxOC8wMy8wMS8lZTclOTUlOTklZTglYTglODAlZTYlOWQlYmYv"><img src="https://teelm.com/wp-content/uploads/2018/03/留言.png"></a> </li>
</ul>
</div>

原代码由侍魂部落提供!

weinxin
扫码关注微信公众
幂彀社区,一个关注互联网、平面设计等领域个人博客;致力于打造一个优秀的资源共享学习平台。
教程 最后更新:2018-9-8
管理员
  • 本文由 发表于 2018年3月3日08:15:44
  • 转载请务必保留本文链接:https://www.teelm.com/2018/03/03/9042.html
匿名

发表评论

匿名网友 填写信息

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