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

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

将下面代码放在网站底部或者侧边栏,主要是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
页面美化
页面美化
640 2
反诈中心拦截网站域名措施与申诉方法
近几年随着互联网不断发展,也伴随着一些网络诈骗的问题,反诈中心打击违规诈骗网站、诈骗APP、标记诈骗手机号,这一些措施取得一定的效果,从去年开始严厉审核一些违规网站,也不排除于批量审核会出现一定的偏差,可能会出现审核不到位的情况,这里我表达自己的一些看法。
5581 156
反诈中心拦截网站域名措施与申诉方法
|
应用服务中间件 nginx
利用nginx+fancyindex美化目录索引
利用nginx+fancyindex美化目录索引 1.下载第三方插件
1275 0
利用nginx+fancyindex美化目录索引
|
3月前
|
弹性计算 运维 安全
阿里云服务器镜像怎么选?公共、自定义、共享、云市场、社区5大镜像区别与选择指南
阿里云服务器ECS的镜像选择关乎运维效率与系统稳定性,包含公共、自定义、共享、云市场、社区五大类型。公共镜像由阿里云官方提供,稳定且合规,适合新手;自定义镜像用户可自主创建,便于快速复刻环境,适合中大型企业;共享镜像支持跨账号协作,适合团队项目;云市场镜像预装应用,简化部署,适合快速上线业务;社区镜像由用户分享,适合探索特定需求,但需自行验证安全。用户应根据实际需求合理选择,并重视服务器安全。
480 2
|
4月前
|
人工智能 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只能被动响应”的局限。
816 1
|
机器学习/深度学习 JSON 监控
国内最大的MCP中文社区来了,4000多个服务等你体验
国内最大的MCP中文社区MCPServers来了!平台汇聚4000多个服务资源,涵盖娱乐、监控、云平台等多个领域,为开发者提供一站式技术支持。不仅有丰富的中文学习资料,还有详细的实战教程,如一键接入MCP天气服务等。MCPServers专注模块稳定性和实用性,经过99.99% SLA认证,是高效开发的理想选择。立即访问mcpservers.cn,开启你的开发之旅!
15215 16
|
搜索推荐 API 开发者
淘宝买家秀API接口(淘宝API系列)
淘宝买家秀API接口为电商运营和产品分析提供宝贵数据,反映消费者真实反馈。通过HTTP GET请求,开发者可获取商品的买家秀信息,包括图片、文字描述、点赞数等,帮助商家改进产品和优化营销策略。Python示例代码展示了如何调用该接口并处理返回数据。需在淘宝开放平台注册并申请权限。
|
缓存 前端开发 网络协议
性能优化|几个方法让图片加载更快一些
对电商网页的性能而言,图片优化是至关重要的事情,本文就此探讨了一些简单、可靠的图片优化手段。

热门文章

最新文章