放入body标签之前

<style>
@import url(dilan.css);

 #mobile-footer {
  /* 底栏的样式设置 */
  position: fixed;
}
@media screen and (min-width:767px){#mobile-footer{display:none}}
.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: .5rem 0;
    position: fixed;
    bottom: 0;
    z-index: 100;
    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: 1.25rem;
    color: #5e6e80;
    font-weight: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 90%;
    position: relative;
    text-decoration: none;
    transition: all 0.15s linear;
    font-size: 12.5px
}

.footer-tabbar__item a:hover {
    color: #222f3e
}
.footer-tabbar {
  transition: transform 0.8s ease-out;
  transform: translateY(100%);
}
</style>
<div id="mobile-footer" class="footer-tabbar">
        <ul id="mobile-menu">
                                                <li class="footer-tabbar__item">
                        <a href="index.html">
                            <i class="ri-home-smile-2-line ri-2x"></i>
                            <p>首页            </p>            </a>
                    </li>
                                                                <li class="footer-tabbar__item">
                        <a href="shouhui/index.html">
                            <i class="ri-chat-smile-2-line ri-2x"></i>
                            <p>打卡            </p>            </a>
                    </li>
                                                                <li class="footer-tabbar__item">
                        <a href="photo.html">
                            <i class="ri-user-smile-line ri-2x"></i>
                            <p>相册            </p>            </a>
                    </li>
                                                                <li class="footer-tabbar__item">
                        <a href="http://118.190.199.233/">
                            <i class="ri-emotion-happy-line ri-2x"></i><p>博客                </p>        </a>
                    </li>
                                    </ul>
    </div>

引入css文件

dilan.css与remixicon.woff2

底栏相关css文件.zip