当前位置:首页 > 学习 > 正文

网站页脚徽章美化

网站页脚徽章美化

之前用shields.io制作过简单的徽章,用于备案号的美化。今天看到一个网站的备案号前面有一个工信部网站favicon图标,非常羡慕,我也想有这个图标加到自己的ICP...

之前用shields.io制作过简单的徽章,用于备案号的美化。今天看到一个网站的备案号前面有一个工信部网站favicon图标,非常羡慕,我也想有这个图标加到自己的ICP备案号前面,让ICP备案号前面多一个小图标。

看到图标的时候,我还思考了一会儿:怎么才能拿到它的这个图标?是找站长要?还是看看网页源码有没有?先看看有没有吧,没有再找站长索取(这里还有个更简单的方法:工信部备案网站的图标不就是嘛,博文写完了才想起来的……)。

在浏览器里面查看网页源码,哈哈,有!!!找到资源URL地址,它的资源是SVG文件,这就更加方便了,直接查看源码,是一堆base64编码,把源码复制下来,去除没用的标签,就留下base64编码。直接在备忘录里面把需要的样式,颜色,内容和图标编码编辑好,完事后在浏览器里面打开。效果出来了:

很好,这就是我要的效果,但是这个备案号后面的“—3”有点不好看,应该用“-”短一点的符号。这个在制作过程中还必须得用长一点的“—”号,不过原因我已经找到了,解决办法也很简单。

带图标标签制作的方式:

https://img.shields.io/badge/左边文字-右边文字-右边颜色?logo=data:image/png;base64,

比如:

https://img.shields.io/badge/鄂ICP备-2023005939—3-orange?logo=data:image/png;base64,后面就是图片编码内容

这里如果用“-”会出现报错,因为“-”是作为参数分隔符的,整个代码里面只有两个“-”分隔符,它会将第二个分隔符后面的内容作为参数,所以会报错,得用“—”解决。

编辑完成后,在浏览器打开看看效果,没问题就查看页面源码,将svg代码复制下来,粘贴到网站页脚位置就行了。这里还有个问题,刚刚提到的“—”太长了,直接在代码里面找,找到所有出现在备案号后面的“—”,就把“—”换成“-”,完美解决。


上一篇:军旅回忆录(五)

下一篇:军旅回忆录(六)

发表评论

最新文章

取消
扫码支持 支付码