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

前言

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

然后移动端底部导航栏用的原来从网上找的,也不好看,于是自己写了一个,由于学的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>

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

本站部分文章资源来源于互联网,仅供学习交流,如若要商用,请购买正版!
若不听劝告,网友造成出现一切后果,与本站本人无关
本站有些资源未经测试,请注意网络安全,本站不对下载的资源造成的后果负责
免责声明
作者:昼白
转载请注明来源:https://www.zhoubaiwl.club/3154.htm
THE END
分享
二维码
打赏
< <上一篇
下一篇>>
文章目录
关闭
目 录