搜索到
1
篇与
的结果
-
网站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 } /* 底部版权、备案等信息美化结束 */
