typecho制作移动端页底导航



  有了移动端页底导航,在手机端体验效果直线提升。声明:又是扒的 若志随笔 — https://www.rz.sb/,大佬的代码,向大佬致敬!

html 代码

  将以下代码放到主题文件 footer.php 里面 </body> 之前。

<!--移动端页底导航开始-->
    <div class="footer-tabbar">
        <ul>
            <li class="footer-tabbar__item">
                <a class="" href="<?php $this->options->siteUrl();?>">
                    <i class="fa fa-home fa-2x"></i>首页
                </a>
            </li>
            <li class="footer-tabbar__item">
                <a class="" href="<?php $this->options->siteUrl();?>archives.html">
                    <i class="fa fa-history fa-2x"></i>归档
                </a>
            </li>            
            <li class="footer-tabbar__item">
                <a class="active" href="<?php $this->options->siteUrl();?>guests.html">
                    <i class="fa fa-commenting-o fa-2x"></i>微语
                </a>
            </li>
            <li class="footer-tabbar__item">
                <a class="" href="<?php $this->options->siteUrl();?>link.html">
                    <i class="fa fa fa-bullseye fa-2x"></i>朋友
                </a>
            </li>
        </ul>
    </div>
<!--移动端页底导航结束-->
复制

CSS 样式

  将下面 CSS 样式放到主题样式文件的最后面。

/* Footer */
.footer-tabbar {
    width: 50rem;
    max-width: 100%;
    margin: 0 auto;
    height: 4rem;
    border-bottom: 0;
    box-shadow: 0 -1rem 50px -2rem rgb(43 86 112 / 50%);
    padding: .1rem 0;
    position: fixed;
    bottom: 0;
    z-index: 10;
    background: hsl(0deg 0% 100% / 70%);
    -webkit-backdrop-filter: saturate(200%) blur(20px);
    -moz-backdrop-filter: saturate(200%) blur(20px);
    -ms-backdrop-filter: saturate(200%) blur(20px);
    backdrop-filter: saturate(200%) blur(20px);
}

.footer-tabbar ul {
    flex-wrap: nowrap;
    width: 100%;
    white-space: nowrap;
    overflow-y: hidden;
    height: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.footer-tabbar__item {
    display: block;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
}

.footer-tabbar__item a {
    border-radius: .625rem;
    color: #5e6e80;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    position: relative;
    text-decoration: none;
    transition: all 0.15s linear;
    font-size: 15px;
}

.footer-tabbar__item a:hover {
    color: #222f3e;
}
@media (min-width:680px){.footer-tabbar{display:none;}}
复制

效果图

typecho页底导航.jpg

图:typecho页底导航.jpg



 赏 
感谢您的支持,我会继续努力哒!
支付宝收款码
tips
  • OωO
  • |´・ω・)ノ
  • ヾ(≧∇≦*)ゝ
  • (☆ω☆)
  • (╯‵□′)╯︵┴─┴
  •  ̄﹃ ̄
  • (/ω\)
  • ∠( ᐛ 」∠)_
  • (๑•̀ㅁ•́ฅ)
  • →_→
  • ୧(๑•̀⌄•́๑)૭
  • ٩(ˊᗜˋ*)و
  • (ノ°ο°)ノ
  • (´இ皿இ`)
  • ⌇●﹏●⌇
  • (ฅ´ω`ฅ)
  • (╯°A°)╯︵○○○
  • φ( ̄∇ ̄o)
  • ヾ(´・ ・`。)ノ"
  • ( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
  • (ó﹏ò。)
  • Σ(っ °Д °;)っ
  • ( ,,´・ω・)ノ"(´っω・`。)
  • ╮(╯▽╰)╭
  • o(*////▽////*)q
  • >﹏<
  • ( ๑´•ω•) "(ㆆᴗㆆ)
  • (。•ˇ‸ˇ•。)
  • 😂
  • 😀
  • 😅
  • 😊
  • 🙂
  • 🙃
  • 😌
  • 😍
  • 😘
  • 😜
  • 😝
  • 😏
  • 😒
  • 🙄
  • 😳
  • 😡
  • 😔
  • 😫
  • 😱
  • 😭
  • 💩
  • 👻
  • 🙌
  • 🖕
  • 👍
  • 👫
  • 👬
  • 👭
  • 🌚
  • 🌝
  • 🙈
  • 💊
  • 😶
  • 🙏
  • 🍦
  • 🍉
  • 😣
  • 颜文
  • Emoji
  • 虎牙
  • 阿鲁
(*) 2 + 5 =
共 1 条评论, 0 次评论点赞。快来参与吧!
    2022年04月01日 广东省广州市 发自Windows 10 回复 0

    css 有待改善