底部导航代码

子比zblog某个模板的底部导航代码

<!--底部导航开始-->

<div class="tp-footer-menu-layer">

        <div class="tp-footer-menu">

            <a href="/">

                <img src="https://img.cetsteam.com/imgs/2025/03/13/c4fd0201e24b496d.png" alt="">

                <span>首页</span>

            </a>

            <a href="https://wz.ykxy.cn/">

                <img src="https://img.cetsteam.com/imgs/2025/03/14/cc5ed07ae7ed8b70.png" alt="">

                <span>网址</span>

            </a>

            <a href="https://shop.ykxy.cn/">

                <img src="https://img.cetsteam.com/imgs/2025/03/14/e9bbffe61d903790.png" alt="">

                <span>商城</span>

            </a>

            <a href="https://bbs.ykxy.cn/zb_system/login.php">

                <img src="https://img.cetsteam.com/imgs/2025/03/14/1ec8e3857412ee48.png" alt="">

                <span>登录</span>

            </a>

            <a href="/">

                <img src="https://img.cetsteam.com/imgs/2025/03/14/1ec8e3857412ee48.png" alt="">

                <span>登录</span>

            </a>

        </div>

    </div>

<style>

        @media screen and (max-width: 750px){

            .tp-footer-menu-layer{

                display: block!important;

            }

            body{

                padding-bottom: 52px;

                box-sizing: border-box;

            }

        }

        .tp-footer-menu-layer{

            display: none;

            width: 100%;

            /* padding: 0 8px; */

            box-sizing: border-box;

            position: fixed;

            bottom: 0;

            left: 0;

            z-index: 10;

        }

        .tp-footer-menu{

            width: 100%;

            background: #fff;

            box-shadow: 0px 3px 5px 5px rgb(16 16 16/10%);

            padding: 4px;

            box-sizing: border-box;

            /* border-radius: 50px; */

            display: flex;

            align-items: center;

            justify-content: space-around;

        }

        .tp-footer-menu a{

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            width: 20%;

            text-decoration: none;

        }

        .tp-footer-menu a img{

            width: 24px;

            height: 24px;

        }

        .tp-footer-menu a span{

            color: #000;

            font-size: 12px;

            font-weight: 600;

            line-height: 16px;

            padding-top: 2px;

            box-sizing: border-box;

        }

    </style>

<!--底部导航结束-->