给网站加个好看的底部导航

前言

我之前在某个博客上看过一篇类似的东西，现在记不清了，但是突然又看到了这个，觉得很好。所以就分享给大家了。好东西就是要分享嘛。

代码如下

<style type="text/css">@media screen and (max-width:768px){.pc-down{display:none;}}</style>
<div class="pc-down">
    <script src="https://cdn.nesxc.com/js/down-icon.js"></script>
    <div class="footwaveline"> <i style="background-image: url(https://img.cdn.nesxc.com/pic/S1/6352ed7e133b2.png);width: 200px;height: 200px;position: fixed;bottom: 0;z-index: 110;background-size: 100%;"></i>
        <div class="footwavewave" style="background: url(https://img.cdn.nesxc.com/pic/S1/63535dafcb3cc.png) 0 0 repeat-x;height: 3px;width: 100%;position: fixed;background-size: 10px 3px;z-index: 98;bottom: 30px;">
    </div>

    <div class="pc-down-text" style="width: 100%;height: 30px;position: fixed;bottom: 0;z-index: 97;box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);background:#fff;">
        <nav class="pc-down-main" style="float: right;margin-right: 50px;margin-top: -7px;">
            <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-pengyouquan"></use></svg><a href="https://www.xizii.com/">友情链接</a></span>
            <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-liuyan"></use></svg><a href="https://www.xizii.com/">在线留言</a></span>
            <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-fuwuqi"></use></svg><a href="https://www.xizii.com/">服务器状况</a></span>
            <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-canbaozhuangtai"></use></svg><a href="https://www.xizii.com/">页面在线情况</a></span>
            <span class="pc-down-main-text" style="display: inline-block;margin-top: 10px;margin-left: 10px;font-size: 18px;">
                <svg class="iconfont" aria-hidden="true"><use xlink:href="#icon-SSLzhengshu"></use></svg><a onclick="window.open('https://myssl.com/seal/detail?domain=www.xizii.com','MySSL安全签章','height=800,width=470,top=0,right=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no')">SSL加密</a></span>
        </nav>
        <div class="yiyan" style="margin-left: 200px;"></div>
    </div>
</div>

注意事项

代码默认屏蔽手机端显示，你可以删除以下代码在手机端显示。

<style type="text/css">@media screen and (max-width:768px){.pc-down{display:none;}}</style>

代码默认调用子比一言接口，所以你不是子比需要删除以下代码，或者自己更换一言接口。

<div class="yiyan" style="margin-left: 200px;"></div>

安装步骤

这个安装很简单，压缩放在html较为靠后的位置即可。

例如，子比在 全局 –自定义代码 –自定义底部HTML 中插入即可。