【原创】小说网移动端底部菜单栏代码

前言

因为搭建了一个小说网，也有一些人在用我的昼白读书网看小说。

然后移动端底部导航栏用的原来从网上找的，也不好看，于是自己写了一个，由于学的HTML和CSS知识有限，大佬轻喷

小说程序用的狂雨CMS

效果图

图标下载

图标用的阿里巴巴矢量图库

引入也引入了，可以直接用，字体文件需要自己上传

只需要iconfont.ttf这一个字体文件，其他不需要，注意字体文件引入路径，这个在CSS里面改

阿里云盘下载

来源：阿里云盘

立即下载

代码

CSS代码

  @font-face {
            font-family: "iconfont";
            /* Project id  */
            src: url('iconfont.ttf?t=1626440246937') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .mobile-show {
            display: none;
        }

        @media screen and (max-width: 768px) {
            .mobile-show {
                position: fixed;
                bottom: 0;
                width: 100%;
                height: 50px;
                box-shadow: 0 -1px 3px 0 rgb(26 26 26 / 10%);
                background: #fff;
                padding: 5px;
                z-index: 5;
                flex-flow: nowrap;
                display: flex;
                justify-content: space-between;
            }
            .mobile-box {
                margin: 0 auto;
            }
            .mobile-show ul li {
                float: left;
                margin: 0 15px;
                width: 40px;
                height: 50px;
                text-align: center;
                list-style: none;
            }
            .mobile-show ul li i {
                line-height: 30px;
                font-size: 30px;
            }
            .mobile-show ul li a {
                display: block;
                text-decoration: none;
                font-size: 12px;
                line-height: 12px;
                color: #333;
            }
        }

 HTML代码

<div class="mobile-show">
        <div class="mobile-box">
            <ul>
                <li>
                    <a href="https://m.zhoubaiwl.club/"><span><i class="iconfont">&#xe7a7;</i><b>首页</b></span></a>
                </li>
                <li> <a href="https://m.zhoubaiwl.club/search.html"><span><i class="iconfont">&#xe7b3;</i><b>搜索</b></span></a></li>
                <li> <a href="https://m.zhoubaiwl.club/all.html"><span><i class="iconfont">&#xe768;</i><b>书库</b></span></a></li>
                <li> <a href="https://m.zhoubaiwl.club/user/bookshelf/index.html"><span><i class="iconfont">&#xe7c4;</i><b>书架</b></span></a></li>
                <li> <a href="https://m.zhoubaiwl.club/user/index/index.html"><span><i class="iconfont">&#xe773;</i><b>我的</b></span></a></li>
            </ul>
        </div> 
    </div>

把这些代码放在合适的位置即可