[教程]一为手机端Tab美化

以下代码放入模板主题 – footer.php文件第128行之后

<style> .nav-bar-container { position: fixed; bottom: -6px; left: 0; right: 0; width: 100%; z-index: 99; background: rgb(255,255,255); backdrop-filter: blur(10px); height: 58px; display: flex; flex-direction: row; justify-content: space-between; padding: 0px; box-shadow: 0 -3px 20px -5px rgb(108 108 108 / 20%); transition: all .3s; } .io-black-mode .nav-bar-container { background: #282a2d!important; backdrop-filter: blur(10px) !important; } .nav-bar-container~footer { margin-bottom: 60px; } .nav-bar-container~footer>#footer-tools { bottom: 85px; } .nav-bar-container .nav-bar-item { display: flex; flex-direction: column; justify-content: center; align-items: center; color: #5a5a5a; flex: 1; } .nav-bar-container .nav-bar-item.active { color: } .nav-bar-container .nav-bar-item>i { font-size: 18px; color: #121212; } .io-black-mode .nav-bar-container .nav-bar-item>i { font-size: 18px; color: #fff; font-weight: bold; } .nav-bar-container .nav-bar-item>span { font-size: 12px; margin-top: 2px; color: #121212; font-weight: bold; } .io-black-mode .nav-bar-container .nav-bar-item>span { color: #fff; } .nav-bar-container .nav-bar-search { background: #f1404b; margin: 10px 8px; padding: 6px 15px; border-radius: 8px; color: #FFF!important; display: inline; margin-bottom: 15px; } .nav-bar-container .nav-bar-search>i { font-size: 18px; } .open-nav-bar { transform: translateY(100%); } .nav-bar-container .dropdown-menu.show { opacity: 1; transform: scale(1); display: block; pointer-events: auto; } .nav-bar-container .dropdown-menu { display: block; border: unset; box-shadow: 0 5px 20px 0px rgb(0 0 0 / 15%); border-radius: 0.25rem; overflow: hidden; opacity: 0; transform-origin: 100% 0 0; pointer-events: none; transform: scale(0); transition: all 500ms cubic-bezier(0, .5, .2, 1); } </style>
<div class="nav-bar-container col-12 col-sm-12 d-md-none d-lg-none d-xl-none"> <a class="nav-bar-item "
href="#"> <i class="io io-HomepageOutline"></i> <span>首页</span> </a> <a
class="nav-bar-item " href="#"> <i class="io io-huo"></i> <span>热点</span> </a> <a
class="nav-bar-item " href="#"> <i class="io io-ListOutline"></i> <span>资讯</span> </a>
<style>
.nav-search {
display: none !important;
}
</style>
<divstyle="width:20%;display:flex;justify-content: center;align-items: center;">
<aclass="nav-bar-search"  data-toggle="modal"data-target="#search-modal"><iclass="iconfont icon-search"></i></a></div>
<aclass="nav-bar-item "href="#"><iclass="io io-ShootOutline"></i><span>影视</span></a>
<aclass="nav-bar-item "href="javascript:void(0)"onclick="goto_bookmark()">
<iclass="io io-CoverageOutline"></i><span>书签</span></a>
<a class="nav-bar-item " href="#"> <i class="io io-PersonalOutline"></i> <span>我的</span> </a>
<a href="#" style="position: absolute; display:block; top: -42px; left: 0; right: 0; width: 100px; height: 30px; background: #f1404b; margin: auto; border-radius: 7px; text-align: center; line-height: 30px; color: #FFF; box-shadow: 0 0 14px 0px rgba(0,0,0,.4); font-size: 13px;">登录体验更佳!</a>
</div>
<script> function goto_bookmark() { location.href = "/login/"; } var t, p, timer; $(window).scroll(function(e) { if (!timer) { timer = setTimeout(function() { p = $(this).scrollTop(); if (t <= p) { /*下滚*/ if (!$('.nav-bar-container').hasClass("open-nav-bar")) { $('.nav-bar-container').addClass("open-nav-bar"); } } else { /*上滚*/ if ($('.nav-bar-container').hasClass("open-nav-bar")) { $('.nav-bar-container').removeClass("open-nav-bar"); } } t = p; timer = null; }, 250) } }); </script>

把图标放入（主题设置 – 其他功能 – 其他杂项 – 阿里图标库地址）

//at.alicdn.com/t/c/font_4507261_70k5iap1b2c.css