将下面代码放在网站底部或者侧边栏,主要是css+js的代码!html格式!
时在逛 Gitee、Github 等各大代码仓库时,往往能看到以下这种徽章式的网页链接,美观好看又方便,那么这个徽章是如何制作出来的呢?本文就带大家制作属于自己的徽章式链接。
<style>
/*底部页脚css*/
.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: #ffa500;
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-fen {
background-color: #e76dcb
}
.github-badge .bg-red {
background-color: #f55066
}
.github-badge .bg-green {
background-color: #3bca6e
}
.github-badge .bg-cai {
background-image: -webkit-linear-gradient(
0deg, #3ca5f6 0%, #a86af9 100%);
</style>
<div class="github-badge">
<span class="badge-subject">站点地图 </span>
<a style="color:#fff" href="http://www.aybk.cn/" rel="external nofollow" target="_blank">
<span class="badge-value bg-red">Sitemap</span></a>
</div>
<div class="github-badge">
<span class="badge-subject">申请</span>
<a style="color:#fff" href="/links" rel="external nofollow" target="_blank">
<span class="badge-value bg-fen">友情链接</span></a>
</div>
<div class="github-badge">
<span class="badge-subject">网站运行</span>
<a style="color:#fff" href="http://www.aybk.cn/" rel="external nofollow" target="_blank">
<span class="badge-value bg-cai"><SPAN id=span_dt_dt style="color: #b5c4c3;"></SPAN> <SCRIPT language=javascript>function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("1/1/2024 23:32:13");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=Math.floor(e_hrsold);
e_minsold=(e_hrsold-hrsold)*60;
minsold=Math.floor((e_hrsold-hrsold)*60);
seconds=Math.floor((e_minsold-minsold)*60);
span_dt_dt.innerHTML='<font style=color:#00ffff>'+daysold+' 天</font> <font style=color:#00ffff>'+hrsold+' 时</font> <font style=color:#00ffff>'+minsold+' 分</font> <font style=color:#00ffff>'+seconds+' 秒</font>';
}
show_date_time();</script></span></a>
</div>
更多推荐内容
- AudioRelay 0.27.5 手机充当电脑音响 11 天前
- AIGC指令进阶课:AI思维培养与高效生活应用 13 天前
- DeepSeek全栈开发实战:AI应用落地全链路指南 13 天前
- 花生十三 2025网课资料全套合集 13 天前
- 网易云音乐小灯泡抽SVIP会员 13 天前
- Google外贸客户开发实战是一本非常实用的快速入门指南。 18 天前
- 星辰八字教程:基础到进阶全解析 20 天前
- AI办公与副业创收实战指南 20 天前
- 正统道学精要:百年集成50册 20 天前
- 配方技术分享-粽子配方多套 22 天前

文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。
版权声明:本站资源来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系客服并出示版权证明以便删除!
抖音最新火爆弹幕游戏羊羊对决/保姆级搭建开播教程,撸音浪直接撸到爽!
« 上一篇
01-17
给WordPress网站增加一个带时间的led广告牌
下一篇 »
01-17