网站ICP备案、公安备案仿Github徽章美化

在网站建设过程中，ICP备案和公安备案是必不可少的环节。然而，传统的备案信息展示方式往往显得单调乏味，与网站整体风格格格不入。为了让你的网站更加美观专业，我们可以借鉴 Github 徽章的风格，对备案信息进行美化。

整体的实现效果可以查看李森的博客下方页面，如下图

整体实现过程是很简单的，注意将下面代码中的备案信息换成自己的。

在网站需要显示备案信息的地方插入下面代码

<div class="github-badge">
    <a href="./" title="©2025 李森的博客">
        <span class="badge-subject">Copyright</span>
        <span class="badge-value bg-purple">©2025 李森的博客</span>
    </a>
</div>
|
<div class="github-badge">
    <a href="https://beian.miit.gov.cn" ; target="_blank" title="鲁ICP备16035197号-4">
        <span class="badge-subject">鲁ICP备</span>
        <span class="badge-value bg-green">16035197号-4</span>
    </a>
</div>
|
<div class="github-badge">
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=37011202002327" ; target="_blank"
       title="鲁公网安备37011202002327号">
        <span class="badge-subject">鲁公网安备</span>
        <span class="badge-value bg-orange">37011202002327号</span>
    </a>
</div>

在网站css文件中放入以下代码

/* 底部版权、备案等信息美化开始 */
.github-badge {
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  font-size: 11px;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px
}

.github-badge .badge-subject {
  display: inline-block;
  background-color: #4d4d4d;
  color: #fff;
  padding: 2px 4px 2px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}

.github-badge .badge-value {
  display: inline-block;
  color: #fff;
  padding: 2px 6px 2px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}

.github-badge .bg-blue {
  background-color: #007ec6
}

.github-badge .bg-orange {
  background-color: #ffa500
}

.github-badge .bg-red {
  background-color: #f00
}

.github-badge .bg-green {
  background-color: #3bca6e
}

.github-badge .bg-purple {
  background-color: #ab34e9
}
/* 底部版权、备案等信息美化结束 */