为您的网站添加网站底部美化代码 支持任意网站

作者头像
首页 🧮综合教程 正文

image.png

将下面代码放在网站底部或者侧边栏,主要是css+js的代码!html格式!

时在逛 Gitee、Github 等各大代码仓库时,往往能看到以下这种徽章式的网页链接,美观好看又方便,那么这个徽章是如何制作出来的呢?本文就带大家制作属于自己的徽章式链接。

image.png

<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>
本站资源仅供学习交流使用请勿商业运营,严禁使用模板&源码从事违法,侵权等非法活动!如链接失效内容有误,请到评论反馈。

免费声明

  1. 本网站的文章内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ:304906607进行删除处理。
  2. 文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)。
  3. 本站资源大多存储在云盘,如发现链接失效,请联系我们我们会第一时间更新。
  4. 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
  5. 本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
  6. 本站永久网址:https://www.aybk.cn
抖音最新火爆弹幕游戏羊羊对决/保姆级搭建开播教程,撸音浪直接撸到爽!
« 上一篇 01-17
给WordPress网站增加一个带时间的led广告牌
下一篇 » 01-17

发表评论

请先登录后才能发表评论

没有更多评论了

个人信息

HI好朋友 ! 请登录
开通会员,享受下载全站资源特权。
百度一下

随便看看

大家都在看

2025年 乙巳年 蛇年
13 : 36 : 00
公历日期
9月26日
农历日期
八月初五
星期
星期五
下午好
金秋时节,愿您收获满满
距离国庆节还有5天
登陆
还没有账号?立即注册
点击按钮进行验证
忘记密码?
登陆
忘记密码
已经有账号?马上登陆
获取验证码
重新获取(60s)
点击按钮进行验证
重置密码
注册
已经有账号?马上登陆
获取验证码
重新获取(60s)
点击按钮进行验证
立即注册