Discuz! n7 模板页脚美化

效果图


代码：

路径：/template/discuz_theme_n7/common/footer.php

<div class="comiis_footer">
    <div class="wp comiis_bottom wlnw">
        <div id="ft" class="clearfix">
            
                        <div id="ft" class="wp cl">
                    <div id="flk" class="y">
                    
                        <p>
                                <!--{if !empty($_G['setting']['site_qq'])}--><a href="//wpa.qq.com/msgrd?v=3&uin=$_G['setting']['site_qq']&site=$_G['setting']['bbname']&menu=yes&from=discuz" target="_blank" title="QQ"><img src="{IMGDIR}/site_qq.jpg" alt="QQ" /></a><span class="pipe">|</span><!--{/if}-->
                                <!--{loop $_G['setting']['footernavs'] $nav}--><!--{if is_array($nav) && $nav['available'] && ($nav['type'] && (!$nav['level'] || ($nav['level'] == 1 && $_G['uid']) || ($nav['level'] == 2 && $_G['adminid'] > 0) || ($nav['level'] == 3 && $_G['adminid'] == 1)) ||
                                                !$nav['type'] && ($nav['id'] == 'stat' && $_G['group']['allowstatdata'] || $nav['id'] == 'report' && $_G['uid'] || $nav['id'] == 'archiver' || $nav['id'] == 'mobile' || $nav['id'] == 'darkroom'))}-->$nav[code]<span class="pipe">|</span><!--{/if}--><!--{/loop}-->
                                                <strong><a href="$_G['setting']['siteurl']" target="_blank">$_G['setting']['sitename']</a></strong>
                                <!--{if $_G['setting']['icp'] || !empty($_G['setting']['mps'])}-->( <!--{if $_G['setting']['icp']}--><a href="https://beian.miit.gov.cn/" target="_blank">$_G['setting']['icp']</a><!--{/if}--><!--{if !empty($_G['setting']['mps'])}--><!--{if $_G['setting']['icp']}--><span class="pipe">|</span><!--{/if}--><a href="https://beian.mps.gov.cn/#/query/webSearch?code=$_G['setting']['mpsid']" target="_blank"><img width="14" height="14" src="{IMGDIR}/ico_mps.png" />$_G['setting']['mps']</a><!--{/if}--> )<!--{/if}-->
                                <!--{hook/global_footerlink}-->
                                <!--{if $_G['setting']['statcode']}-->$_G['setting']['statcode']<!--{/if}-->
                        </p>
                        <p class="xs0">
                                {lang time_now}
                                <span id="debuginfo">
                                <!--{if debuginfo()}-->, Processed in $_G[debuginfo][time] second(s), $_G[debuginfo][queries] queries
                                        <!--{if $_G['gzipcompress']}-->, Gzip On<!--{/if}--><!--{if C::memory()->type}-->, <!--{echo C::memory()->type}--> On<!--{/if}-->.
                                <!--{/if}-->
                                </span>
                        </p>
                </div>
              
            <p class="contact">
                Email: <a href="mailto:kefu@foxccs.com" title="客服邮箱">kefu@foxccs.com</a> | QQ群: <a href="https://qm.qq.com/q/QE9rQLOt8" title="QQ交流群">339164484</a>
            </p>
            
            <p>小提示：按 <span style="color: red;"> Ctrl+D  </span>可收藏本网站，方便下一次您快速打开使用。</p>
        </div>
    </div>
</div>

<style>
/* 选择器 .comiis_footer 选择class为comiis_footer的元素 */
.comiis_footer {
    background-color: #ffffff; /* 设置元素的背景颜色为十六进制颜色值#f2f2f2，这是一种浅灰色 */
    padding: 0px 0; /* 设置元素的内边距为顶部和底部20像素，左右为0像素 */
    /*
    border-top: 0px solid #ddd; */ /* 设置元素的上边框为1像素宽的实线，颜色为十六进制颜色值#ddd，这是一种浅灰色 */
}

/* 选择器 #ft 选择id为ft的元素 */
#ft {
    width: 1200px; /* 设置元素的宽度为1200像素，确保内容在一定宽度下显示 */
    margin-left: 0; /* 设置元素的左边距为0，使元素靠左对齐 */
    text-align: left; /* 设置元素内的文本对齐方式为靠左，使文本内容在元素内部靠左显示 */
}

/* 选择器 #ft .copyright, #ft .links, #ft .contact 选择id为ft的元素内部的class为copyright, links, contact的元素 */
#ft .copyright, #ft .links, #ft .contact {
    margin: 0 0; /* 设置元素的外边距为顶部和底部10像素，左右为0像素 */
    font-size: 14px; /* 设置字体大小为14像素 */
    color: #333; /* 设置字体颜色为十六进制颜色值#333，这是一种深灰色 */
}

#ft .links a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

#ft .links a:hover {
    text-decoration: underline;
}

#ft .links span {
    margin: 0 5px;
    color: #999;
}
</style>