为您的网站添加网站底部美化代码-支持任意网站
使用说明:
将下面代码放在网站底部或者侧边栏,主要是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/1000secondsold=Math.floor(sectimeold);msPerDay=24*60*60*1000e_daysold=timeold/msPerDaydaysold=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网 » 为您的网站添加网站底部美化代码-支持任意网站