样式预览

教程简介

由于考虑到小白站长不懂怎么衔接css样式文件，本次教程为本地化样式不做衔接处理。老站长有强迫症的可以自行衔接css文件做页面美观！由于考虑到小白站长不懂怎么衔接css样式文件，本次教程为本地化样式不做衔接处理。老站长有强迫症的可以自行衔接css文件做页面美观！

部署方式

1、首先把以下html代码连同css代码直接复制到你要展示的地方，一般放在页脚最合适，如有想法可放在其他地方也是没有问题的，网站的页脚文件一般是以此“footer.php”命名，找到合适的位置粘贴即可。

2、代码中的超链接地址以及名称可自行修改。改成自己想要跳转的页面即可。

3、样式颜色以及按钮有想法的可以自行DIV，不懂修改的就不要动了。以免样式不不显示！

HTML代码

<div class="footertb"><span class="badge-subject"><a href="https://www.xlgblog.cn" target="_blank">©2024</span><span class="badge-value bg-blueviolet">小李哥博客</span></a></div>
<div class="footertb"><span class="badge-subject"><a href="https://www.emlog.net/?ic=Np7J3Hxl" target="_blank">基于</span><span class="badge-value bg-blueviolet">Emlog搭建</span></a></div>
<div class="footertb"><span class="badge-subject"><a href="https://www.57cloud.net" target="_blank">CDN</span><span class="badge-value bg-blueviolet">57Cloud云</span></a></div>
<div class="footertb"><span class="badge-subject"><a href="/sitemap.xml" target="_blank">地图</span><span class="badge-value bg-blueviolet">Sitemap</span></a></div>
<div class="footertb"><span class="badge-subject"><a href="/rss.php" target="_blank">订阅</span><span class="badge-value bg-blueviolet">RSS</span></a></div>
<div class="footertb"><span class="badge-subject"><a href="#" target="_blank">反馈</span><span class="badge-value bg-blueviolet">mailbox</span></a></div>
<div class="footertb"><span class="badge-subject"><a href="#" target="_blank">统计</span><span class="badge-value bg-blueviolet">51LA</span></a></div>
<p><font><a style="color:red;"
href="https://www.57cloud.net/aff/RLLSZMLJ">本站由<img class="slt" height="60" alt="57云互联" src="https://www.57cloud.net/upload/logo.png">公益服务商提供网站安全加速服务支持</a></font></p></strong>
<style>
.slt{width:70px;height:auto}
</style>

CSS代码

/**底部图标**/
<style>
.footertb {
    display: inline-block;
    border-radius: 4px;
    text-shadow: none;
    font-size: 12px;
    color: #fff;
    line-height: 15px;
    background-color: #ABBAC3;
  margin-bottom: 5px;
}
.footertb .badge-subject {
    display: inline-block;
    background-color: #4D4D4D;
    padding: 4px 4px 4px 6px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.footertb .badge-value {
    display: inline-block;
    padding: 4px 6px 4px 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
</style>