源码UI-官方其他 2024-06-12

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

使用说明：

将下面代码放在网站底部或者侧边栏，主要是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="/sitemap_1.xml" 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="/" 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>
<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="/sitemap_1.xml" 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="/" 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>

<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="/sitemap_1.xml" 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="/" 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.本站资源都是白菜价出售，同样的东西，我们不卖几百，也不卖几十，甚至才卖几块钱，一个永久会员能下载全站100%源码了，所以单独购买也好，会员也好均不提供相关技术服务。

2.如果源码下载地址失效请/联系站长QQ进行补发。

3.本站所有资源仅用于学习及研究使用,请必须在24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担。资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您权益请联系本站删除!

4.本站站内提供的所有可下载资源（软件等等）本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发）；但本网站不能保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug；同时本站用户必须明白，【源码源码ui网】对提供下载的软件等不拥有任何权利（本站原创和特约原创作者除外），其版权归该资源的合法拥有者所有。

5.请您认真阅读上述内容，购买即以为着您同意上述内容。

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

源码UI-官方钻石

分享到：

使用说明：

代码如下：

效果演示图：

源码UI-官方 钻石

相关推荐

发表回复 取消回复

源码UI-官方钻石

发表回复取消回复