css教程

给网站添加一个Gitee/Github徽章图标CSS代码

我的站长站 2024-01-17 人阅读

为您的网站添加一个Gitee/Github徽章图标,支持任意网站,将下面代码放在网站底部或者侧边栏,主要是html、CSS代码!效果如下:

给网站添加一个Gitee/Github徽章图标CSS代码

HTML代码

<div class="github-badge">
  <span class="badge-subject">站点地图 </span>
  <a style="color:#fff" href="https://www.wdzzz.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="https://www.wdzzz.com/" 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="https://www.wdzzz.com/" rel="external nofollow"  target="_blank">
<span class="badge-value bg-cai"><SPAN id=span_dt_dt style="color: #b5c4c3;"></SPAN>

CSS代码

<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>

JavaScript代码

这个主要是显示时间倒计时的。

<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>


相关专题
github
github
2024-01-30 64

github是全球著名的代码托管平台,学会使用github可以找到更多的好源码.我的站长站为大家整理的关于github的资源,包含github使用教程、github加速工具,基于github...

相关推荐
  • CSS代码
  • 左侧固定宽度,右侧随浏览器自适应宽度的CSS代码

    左侧固定宽度,右侧随浏览器自适应宽度的布局在后台框架、左图右文的样式中经常用到。左边固定200PX,右侧宽度随浏览器缩放自动调整大小,我的站长站分享几种实现方法,代码尽量精简,只留关键代码。方法1、左浮动,右margin-left比较推荐的方法,兼容性高,代码也...

    css教程 51 1年前
  • css3海浪波浪动态效果代码

    HTML代码建立一个div,id为wavesDIV,之后使用svg绘制一个图形出来,此时这个图形还是不会懂的,我们需要使用animation来让他动起来<div id="wavesDIV" style="display: block;"> <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlin...

    css教程 97 2年前
  • CSS+JS简单的底部浮动搜索框效果代码

    一段CSS+JS简单的底部浮动搜索框效果代码,实现PC移动端底部浮悬代码。CSS代码<style type="text/css">* {margin:0px; padiing:0px;}.login_alert{position:fixed;bottom:0px;left:0px;width:100%;z-index:9999;}.login_alert_close{position:absolut...

    css教程 147 3年前
最新更新