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

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

将下面代码放在网站底部或者侧边栏,主要是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>
相关文章
|
6月前
|
前端开发 JavaScript UED
页面美化
页面美化
90 2
|
4月前
|
小程序 开发者
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
【微信小程序-原生开发】实用教程05-首页(含自定义调试模式、插入图片、图文排版、底部留白、添加本地图片)
59 0
|
2月前
EMLOG程序单页友链和标签增加美化
EMLOG程序单页友链和标签增加美化
34 3
EMLOG程序单页友链和标签增加美化
|
5月前
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
ueditor1.5 百度富文本 编辑器增加字间距功能及按钮
71 0
|
6月前
超级好看动态视频引导页源码
超级好看动态视频引导页源码,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面
41 0
超级好看动态视频引导页源码
|
6月前
|
前端开发 小程序
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
uniapp 将标题背景更换背景图片 完美解决(附加源码+实现效果图)
841 0
|
6月前
|
前端开发
蓝色时间轴个人博客网页模板代码
这是一个有关看雪时间轴的css3+html5 网站静态的个人博客网页模板
42 0
|
前端开发
清明节,如何用代码让网页变灰
清明节,如何用代码让网页变灰
|
JavaScript 前端开发 API
几行代码搞定网页全屏自定义内容
screenfull 是用于跨浏览器使用 JavaScript Fullscreen api 的简单包装器,可让您将页面或任何元素全屏显示 。
小储云系统内置防红页面美化
小储云内置防洪美化,比较火的防洪页面,特意做到小储云上面,这是本站更新的第一个小储云的页面,会更新越来越多,上传到根目录即可,然后解压-压缩包!
293 0
小储云系统内置防红页面美化