6月24日
网站LOGO 六月是只猫 - 互联网技术分享指南
生活,一半家长里短,一半山川湖海...
菜单
  • 热评
    用户的头像
    首次访问
    上次留言
    累计留言
    我的等级
    我的角色
    打赏二维码
    打赏博主
    网站底部添加徽章式美化代码 支持任意网站
    点击复制本页信息
    微信扫一扫
    文章二维码
    文章图片 文章标题
    创建时间
  • 一 言
    确认删除此评论么? 确认
  • 本弹窗介绍内容来自,本网站不对其中内容负责。
    www.lyszm.com

    网站底部添加徽章式美化代码 支持任意网站

    六月是只猫 · 原创 ·
    日常随笔技术分享互联网 · 福利代码html代码分享
    共 2908 字 · 约 1 分钟 · 1113
    本文最后更新于2024年01月28日,已经过了147天没有更新,若内容或图片失效,请留言反馈
    有时在逛 Gitee、Github 等各大代码仓库时,往往能看到以下这种徽章式的网页链接,美观好看又方便,那么这个徽章是如何制作出来的呢?本文就带大家制作属于自己的徽章式链接,有需要的拿走,不回复可见了,留个评论~

    将下面代码放在网站底部或者侧边栏,主要是css+js的代码!html格式!

    html 代码:
    <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-bei {
      background-color: #32CD32
    }
    
    .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="https://www.lyszm.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">京ICP备</span>
      <a style="color:#fff" href="/links" rel="external nofollow"  target="_blank">
        <span class="badge-value bg-bei">8888888号-1</span></a>
    </div> 
    
    <div class="github-badge">
      <span class="badge-subject">网站运行</span>
      <a style="color:#fff" href="https://www.lyszm.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>
    
    声明:本文由 六月是只猫(博主)原创,依据 CC-BY-NC-SA 4.0 许可协议 授权,转载请注明出处。
    现在已有

    1

    条评论
    发一条!
    1. 头像
      obaby
      • 等级:Lv.3
      • 角色:访客
      • 在线:三月内

      我是直接用的第三方的网址实现的。

      · · · 山东-青岛
    博客logo 六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海... 51统计 百度统计
    MOEICP 萌ICP备20248888号 ICP 京ICP备2022028403号-1 ICP 京公网安备 11010502051304号 又拍云 本站由又拍云提供CDN加速/云存储服务 无畏云 本站由无畏云赞助高防CDN/安全防护和加速服务

    🕛

    本站已安全运行 1 年 226 天 9 小时 37 分
    六月是只猫 - 互联网技术分享指南. © 2022 ~ 2024.
    网站logo

    六月是只猫 - 互联网技术分享指南 生活,一半家长里短,一半山川湖海...
     
     
     
     
    壁纸
     
     
     
     

    1

    1

    1

  • 下一篇