看到很多博客移动端底部都有单独的导航菜单，体验还不错，导航可以是图片的，也可以修改为文字，电脑端不显示，只在手机端显示，其它系统程序自己调整应该也可以使用，如果是使用begin主题把代码添加到页脚footer-widget.php文件中就可以，这里把实现方法分享给小伙伴们。
图片版代码:
- <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>
- <div class="nav">
- <ul>
- <li> <a href="https://mlsha.cn/"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp17m7sbzuj202s02smx1.jpg"></a> </li>
- <li> <a href=""https://mlsha.cn/wy"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp1tksixe7j202s02s0sl.jpg"></a> </li>
- <li> <a href="https://mlsha.cn/music/"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp1tnw1p76j202s02sweb.jpg"></a> </li>
- <li><a href="a href="https://mlsha.cn/links"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp17fp19z6j202s02sa9x.jpg"></a> </li>
- <li> <a href="https://mlsha.cn/about.html"><img src="https://ww2.sinaimg.cn/large/a15b4afegy1fp16ww30rhj202s02sglh.jpg"></a> </li>
- </ul>
- </div>
文字版代码
- <style type="text/css">
- .nav{
- display:none;
- }
- @media only screen and (max-width:450px){
- .site-info{
- padding:15px 0 58px 0;
- }
- #advert_widget, .php_text .widget-text, .widget .textwidget{
- padding:0;
- }
- .nav{
- position:fixed;
- z-index:999;
- bottom:0;
- width:100%;
- height:40px;
- display:block;
- right:0;
- box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
- -webkit-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
- -mox-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
- -o-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
- -ms-box-shadow:0px 0px 10px 3px rgba(223, 223, 247, 1.0);
- }
- .nav{
- padding-left:0;
- margin-bottom:0;
- list-style:none;
- }
- .nav span{
- width:50px !important;
- height:50px !important;
- }
- .font-text {
- margin: 0 0 0 5px;
- color: #1ba1e2;
- }
- .nav > ul{
- position:relative;
- z-index:1;
- height:40px;
- background: rgba(255,255,255,.85);
- 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-type:none;
- top:5px;
- }
- .nav ul li a{
- display:block;
- margin-right:auto;
- margin-left:auto;
- }
- }
- </style>
- <div class="nav">
- <ul>
- <li> <a href="https://mlsha.cn/"><span class="font-text"><i class="fa-home fa"></i> 首页</span></a></li>
- <li> <a href="https://mlsha.cn/wy"><span class="font-text"><i class="fa-twitch fa"></i> 说说</span></a></li>
- <li> <a href="https://mlsha.cn/links"><span class="font-text"><i class="fa-link fa"></i> 友链</span></a></li>
- <li> <a href="https://mlsha.cn/music/"><span class="font-text"><i class="fa-headphones fa"></i> 音乐</span></a></li>
- <li> <a href="https://mlsha.cn/about.html"><span class="font-text"><i class="fa-info fa"></i> 关于</span></a></li>
- </ul>
- </div>
使用方法
后台→外观→小工具→增强文本→页脚小工具→内容：复制粘贴以上代码保存即可。
暂无评论