为您的网站添加通用网站底部美化代码

简介: 为您的网站添加通用网站底部美化代码

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

时在逛 Gitee、Github 等各大代码仓库时,往往能看到以下这种徽章式的网页链接,美观好看又方便,那么这个徽章是如何制作出来的呢?本文就带大家制作属于自己的徽章式链接。
9d8acbb3774e40d597d2afc0b0b3c0c5.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.qqmu.com/" 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.qqmu.com/" 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>
相关文章
|
前端开发 JavaScript UED
页面美化
页面美化
697 2
|
缓存 运维 容灾
入行5年,谈谈我在阿里做测试开发的经验
作者在阿里一直从事测试开发相关工作,这几年学习很多、收获很多,作者希望给还在该方向摸爬滚打的同学一些启发和方向。
|
应用服务中间件 nginx
利用nginx+fancyindex美化目录索引
利用nginx+fancyindex美化目录索引 1.下载第三方插件
1316 0
利用nginx+fancyindex美化目录索引
|
7月前
|
人工智能 安全 机器人
OpenClaw傻瓜部署教程——阿里云无影云电脑OpenClaw(Clawdbot)安装图文流程
本教程详解如何在阿里云无影云电脑上一键部署OpenClaw(Clawdbot)机器人:3步分钟级启动,内置多款AI技能;支持钉钉、QQ、飞书等IM平台快速接入,仅需配置密钥即可唤醒;含百炼API对接、7×24运行设置及镜像变更指南。
3159 5
|
8月前
|
机器学习/深度学习 算法 自动驾驶
基于YOLOv8模型的行人车辆多目标检测计数与跟踪系统
本研究基于YOLOv8模型,针对智能交通与公共安全需求,开展行人车辆多目标检测、计数与跟踪技术研究。通过融合YOLOv8高精度检测与DeepSORT稳定跟踪,实现复杂场景下目标的实时定位、统计与轨迹追踪,提升交通管理效率与公共安全保障能力,推动智慧城市发展。
|
5月前
|
弹性计算 运维 安全
阿里云服务器镜像怎么选?公共、自定义、共享、云市场、社区5大镜像区别与选择指南
阿里云服务器ECS的镜像选择关乎运维效率与系统稳定性,包含公共、自定义、共享、云市场、社区五大类型。公共镜像由阿里云官方提供,稳定且合规,适合新手;自定义镜像用户可自主创建,便于快速复刻环境,适合中大型企业;共享镜像支持跨账号协作,适合团队项目;云市场镜像预装应用,简化部署,适合快速上线业务;社区镜像由用户分享,适合探索特定需求,但需自行验证安全。用户应根据实际需求合理选择,并重视服务器安全。
684 2
|
6月前
|
安全 开发工具 git
【Git】Git 系统性使用指南(内含《核心Git命令速查表》)
这是一份全面、实用的Git系统性指南,涵盖基础配置、日常操作、分支管理、远程协作、撤销回退、标签与高级命令(如rebase、cherry-pick、bisect等),附带速查表、规范建议和最佳实践,适合开发者日常参考、团队协作及面试复习。
1482 3
|
6月前
|
人工智能 Rust JavaScript
1分钟吃上AI🦞小龙虾!阿里云/本地部署OpenClaw,配置免费api+集成5大热门Skills实战指南
OpenClaw的进化从未停止。当多数用户还在依赖基础对话功能时,ClawHub技能市场已诞生出一批颠覆性技能——能像人一样操作网页的Agent Browser、手机上就能合代码的GitHub技能、无需吩咐主动行动的Proactive Agent,甚至还有AI自己编写的热门技能。截至2026年3月,ClawHub前10名技能下载量均突破47万次,其中6-10名的5个技能,更是给OpenClaw装上了“眼睛(浏览器)、手脚(工具操控)和主见(主动行动)”,彻底打破“AI只能被动响应”的局限。
902 1