网站底部合作联系按钮美化分享

网站底部合作联系按钮美化分享

代码主要是用来美化一下网站底部的样式，添加一些有个性好看的文字和图片，不至于太单调了，直接丢在网页的底部即可，然后需要的改下里面的文字和图标标识，自己网站的相关信息就可以了，可以简单博客美化。

效果如图：

实现代码：

<!--网站底部按钮美化 html 开始 by 大雄搜集站 soujz.com-->
<style type="text/css">
/*CSS 代码网站底部按钮美化 soujz.com*/
/*底部页脚*/
.github-badge {
display: inline-block;
border-radius: 4px;
text-shadow: none;
font-size: 12px;
color: #fff;
/*line-height: 15px;*/
background-color: #abbac3;
margin-bottom: 5px;
}
.github-badge .badge-subject {
display: inline-block;
background-color: #f6b044;
padding: 4px 4px 4px 6px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
display: inline-block;
padding: 4px 6px 4px 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.github-badge .bg-blue {
background-image: -webkit-linear-gradient(0deg, #3ca5f6 0%, #a86af9 100%);
}
.github-badge .bg-orange {
background-color: #05b1a4;
}
.github-badge .bg-red {
background-color: #f55066;
}
.github-badge .bg-green {
background-color: #e76dcb;
}
/*CSS 代码网站底部按钮美化结束 soujz.com*/
</style>
<!--网站底部按钮美化 html 开始 by 大雄搜集站 soujz.com-->
<div class="github-badge">
<!--<span class="badge-subject">申请</span>-->
<a href="https://soujiz.com/weblink" target="_blank">
<span class="badge-value bg-red">友情链接</span></a>
</div>
<div class="github-badge">
<a href="https://soujiz.com/sitemap.xml" target="_blank">
<span class="badge-value bg-green">站点地图</span></a>
</div>
<div class="github-badge">
<a href="https://soujiz.com/copyright" target="_blank">
<span class="badge-value bg-orange">免责申明</span></a>
</div>
<div class="github-badge">
<a href="https://wpa.qq.com/msgrd?v=3&uin=2371305831&site=qq&menu=yes">
<span class="badge-value bg-blue">合作联系</span>
</a>
</div>