给网站添加底部导航栏

前两天为了美观给博客添加了个底部导航栏，今晚在群里蹭IP的时候，又有朋友来问我
于是我就分享出来吧！

HTML代码

{alert type="info"}
将以下代码添加进你的网站底部文件，比如 footer.php 等
{/alert}

<!-- 百度搜索 : 流星小屋
www.liuxingyu.icu -->
<nav class="nav-shouji">
    <div class="nav-item">
        <div class="img">
            <a href="/"><img src="https://pic.imgdb.cn/item/638a01f316f2c2beb151cda5.png" width="50" rel="external nofollow" ></a>
        </div>       
    </div>
    <div class="nav-item">
        <div class="img">
            <a href="/index.php/26.html"><img src="https://pic.imgdb.cn/item/638a02cb16f2c2beb15305a2.png" width="50" rel="external nofollow" ></a>
        </div>        
    </div>
    <a class="nav-item">
        <div class="img">
            <a href="/index.php/14.html"><img src="https://pic.imgdb.cn/item/638a064916f2c2beb15a8dca.png" width="50" rel="external nofollow" ></a>
        </div>       
    </a>
    <div class="nav-item">
        <div class="img">
            <a href="/index.php/32.html"><img src="https://pic.imgdb.cn/item/638a03de16f2c2beb1551e80.png" width="50" rel="external nofollow" ></a>
        </div>        
    </div>
    <div class="nav-item">
        <div class="img">
             <a href="/index.php/21.html"><img src="https://pic.imgdb.cn/item/638a046516f2c2beb155e0e7.png" width="50" rel="external nofollow" ></a>
        </div>       
    </div>
</nav>

css代码

{alert type="info"}
将下面css代码添加进你的全局css代码中，如果是ty博客joe主题的话可以直接在后台添加
{/alert}

/*百度搜索 : 流星小屋
www.liuxingyu.icu*/
@media (min-width: 768px) {
    .nav-shouji {
        display: none !important;
    }
}
.nav-shouji{
            display: flex;
            position: fixed;
            bottom:0;
            z-index:99;
            height: 55px;
            width: 100%;
            background: var(--background);
            flex-shrink: 0;
            font-size: 14px;
        }
        .nav-shouji .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            color: var(--main);
        }       
        .nav-item:nth-child(3) {
            transform: translateY(-20px);
            background: var(--background);
            border-radius: 50%;
            height: 75px;
            width: 75px;
            flex-shrink: 2;
            box-shadow: 0 -3px 4px rgba(0,0,0,.1);
        }
        .nav-shouji .nav-item .img {
            height: 24px;
            overflow: hidden;
        }
        .nav-item:nth-child(3)>.img{
            height: 30px;
            margin-bottom: 5px;            
        }
        .nav-shouji .nav-item img {
            width: 24px;
            height: 24px;
            overflow: hidden;
       }

{lamp/}

{alert type="error"}
如果找不到全局css文件或者单页面怎么办呢？
其实可以使用内嵌式的办法将css内嵌进php或HTML等文件的
{/alert}

底部导航栏内嵌css代码

<!-- 百度搜索 : 流星小屋
www.liuxingyu.icu -->
<nav class="nav-shouji">
    <div class="nav-item">
        <div class="img">
            <a href="/"><img src="https://pic.imgdb.cn/item/638a01f316f2c2beb151cda5.png" width="50" rel="external nofollow" ></a>
        </div>       
    </div>
    <div class="nav-item">
        <div class="img">
            <a href="/index.php/26.html"><img src="https://pic.imgdb.cn/item/638a02cb16f2c2beb15305a2.png" width="50" rel="external nofollow" ></a>
        </div>        
    </div>
    <a class="nav-item">
        <div class="img">
            <a href="/index.php/14.html"><img src="https://pic.imgdb.cn/item/638a064916f2c2beb15a8dca.png" width="50" rel="external nofollow" ></a>
        </div>       
    </a>
    <div class="nav-item">
        <div class="img">
            <a href="/index.php/32.html"><img src="https://pic.imgdb.cn/item/638a03de16f2c2beb1551e80.png" width="50" rel="external nofollow" ></a>
        </div>        
    </div>
    <div class="nav-item">
        <div class="img">
             <a href="/index.php/21.html"><img src="https://pic.imgdb.cn/item/638a046516f2c2beb155e0e7.png" width="50" rel="external nofollow" ></a>
        </div>       
    </div>
</nav>

<style type="text/css">
@media (min-width: 768px) {
    .nav-shouji {
        display: none !important;
    }
}
.nav-shouji{
            display: flex;
            position: fixed;
            bottom:0;
            z-index:99;
            height: 55px;
            width: 100%;
            background: var(--background);
            flex-shrink: 0;
            font-size: 14px;
        }
        .nav-shouji .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            color: var(--main);
        }       
        .nav-item:nth-child(3) {
            transform: translateY(-20px);
            background: var(--background);
            border-radius: 50%;
            height: 75px;
            width: 75px;
            flex-shrink: 2;
            box-shadow: 0 -3px 4px rgba(0,0,0,.1);
        }
        .nav-shouji .nav-item .img {
            height: 24px;
            overflow: hidden;
        }
        .nav-item:nth-child(3)>.img{
            height: 30px;
            margin-bottom: 5px;            
        }
        .nav-shouji .nav-item img {
            width: 24px;
            height: 24px;
            overflow: hidden;
       }
</style>

{alert type="info"}
内嵌的方式也很简单，直接将css放入 <style></style> 标签内即可
{/alert}

例如

 <style type="text/css">
 我是css代码
 </style>