为WordPress博客网站添加好看的底部导航按钮,导航是图片的,也可以修改为文字,电脑端不显示,只在手机端显示,其它系统程序也可以用,wp鸟叔主题的把代码添加到页脚。
代码:
<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>
原代码由侍魂部落提供!
© 版权声明
分享是一种美德,转载请保留原链接!
本站所有文章,如无特殊说明或标注,均为本站原创发布。
任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。