【主题美化】Lightsns主题好看的页脚自定义html

图标介绍：

第一个：打赏 / 赞助的二维码

第二个：可以放qq的二维码 / qq群的二维码 （也可以把代码中的img去掉，直接使用a链接的形式跳转）

第三个：公众号二维码

使用方法：后台 – 外观布局 – 底部设置 – 自定义

<style>
  #moe {
    width: 100%;
    align-items: center!important;
    display: flex!important;
  }
  .flex-md-fill {
    -ms-flex: 1 1 auto!important;
    flex: 1 1 auto!important;
  }
  .moe-menu {
    margin-bottom: .75rem;
  }
  .moe-menu li {
    display: inline-block;
  }
  
  .moe-menu a {
    color: #f2f2f5;
    display: block;
    font-size: .875rem;
    margin: 0 1rem 0 0;
  }
  
  .moe-copyright,
  .moe-links,
  .moe-links a {
    color: #9ca0ad;
  }
  
  .moe-r a {
    margin-left: 10px;
    width: 60px; 
    height: 60px;
    display: block; 
    float:right;
    text-align: center;
    position: relative;
  }
  .moe-r a i { width: 40px; height: 40px; font-size: 20px; text-align: center; position: relative; top: 50%; transform: translateY(-50%); color: #999; background: #343a40; border-radius: 10%; line-height: 40px; cursor: pointer;transition:background .5s; -moz-transition:background .5s; -webkit-transition:background .5s; -o-transition:background .5s;}
  .moe-r span { position: absolute; left: -11px;bottom: 0;}
  .moe-r span img { width: 80px; height: 80px; position: relative; top: -70px; border: 1px #ccc solid; }
  .moe-r a:hover span { display: block!important; }
  .moe-r span:after {z-index: -1;position: absolute; content: ""; border-width: 10px 10px 0; border-style: solid; border-color: #777 transparent transparent; top: 8px; left: 50%; margin-left: -10px; }
  .moe-r span:before { z-index: 1; position: absolute; content: ""; top: 5px; left: 0; width: 100%; height: 30px; background: #fff0; }
  .moe-r a:nth-child(1):hover i { background: #1ec354; color: #fff; }
  .moe-r a:nth-child(2):hover i { background: #3091f4; color: #fff; }
  .moe-r a:nth-child(3):hover i { background: #f74864; color: #fff; }
  
  .moe-links {
    width: 1065px;
    margin: 0 auto;
  }
  .moe-links a {
    margin: 0 .375rem 0 0;
  }
  .border-top {
    border-top: 2px solid #dee2e6!important;
  }
  .pt-3 {
    padding: 30px 0 50px 0 !important;
  }
  .border-secondary {
    border-color: #393E46 !important;
  }
  .text-xs {
    font-size: .9rem !important;
  }
</style>
<div class="jinsom-footer" style="background-color: #222831 !important;">
<div class="jinsom-footer-top clear">
  
    <div id="moe">
        <div class="moe-l">
            <ul class="moe-menu">
                <li><a href="#">关于我们</a></li>
                <li><a href="#">免责声明</a></li>
                <li><a href="#">分类3</a></li>
                <li><a href="#">分类4</a></li>
            </ul>
          
            <div class="moe-copyright text-xs">
                ? 2019 萝莉即正义 (*/ω＼*) 
            </div>
        </div>
        <div class="flex-md-fill"></div>
        <div class="moe-r">
            <a><span style="display: none;"><img src="https://acglt.com/wp-content/uploads/2019/01/qrcode_for_gh_94649752542b_344.jpg"></span><i class="fa fa-weixin"></i></a>
            <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=27e367fe36ebf1c5cbf377c874f37c49f837c3c9c2917abd5165030d0e545563"><span style="display: none;"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="#  萌尤" title="#  萌尤"></span><i class="fa fa-qq"></i></a>
            <a><span style="display: none;"><img src="https://acglt.com/wp-content/uploads/2019/01/QQ图片20190130065612.jpg"></span><i class="fa fa-dollar"></i></a>
        </div>
    </div>
</div>    
    <div class="moe-links border-top border-secondary pt-3 text-xs">
        <span>友情链接：</span>
            <a href="#" target="_blank">XUHENG</a>
            <a href="#" target="_blank">链接1</a>
            <a href="#" target="_blank">链接2</a>
            <a href="#" target="_blank">链接3</a>
    </div>  
</div>

原文地址：https://acglt.com/2127.html