手机端底部导航代码

手机端底部导航代码

代码

<!--底部导航开始-->
<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>
<!--底部导航结束-->