开屏动画

typecho 添加时间轴

技术 3 评 364 度
机器人
AI摘要
Gemini

哇,终于把上个博客的“博客大事记”迁移过来了,真是太棒了!尤其是那个时间轴,太赞了!CSS代码和html代码都非常详细,一看就懂,太感谢你了!赶紧把你的博客地址发给我,我要去看看你的时间轴长什么样。

一直在想把上个博客的“博客大事记”给迁移过来,今晚终于搞定!

2023-09-04T14:13:08.png

相信不少朋友会问时间轴是如何搞定的,下面就分享给大家

CSS代码

/* 站点动态时间轴 */
 #teamnewslist ol {
    list-style:none;
    margin-left: 36px;
    padding-left: 14px;
    border-left: 2px solid #eee;
    font-size: 18px;
    color: #666;
}
#teamnewslist b {
    font-size: 12px;
    font-weight: normal;
    color: #999;
    display: block;
    position: relative;
    margin-bottom:5px;
}
#teamnewslist b::after {
    position: absolute;
    top: 6px;
    left: -22px;
    content:'';
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #ccc;
    box-shadow: 2px 2px 0 rgba(255, 255, 255, 1), -2px -2px 0 rgba(255, 255, 255, 1)
}
#teamnewslist li {
    list-style:none;
    margin: 0 0 20px 0;
    line-height: 100%;
}
#teamnewslist li:hover {
    color: #555;
}
#teamnewslist li:hover b::after {
    border-color: #C01E22;
}
#teamnewslist li:hover b {
    color: #C01E22;
}

html代码

<div id="teamnewslist">
    <ol> 
        <li><b>2022.12.05</b>购买虚拟主机1年“乐数云”香港主机19.9一年,?</li>
        <li><b>2022.09.24</b>购买域名:blog.xiangming.site .10年</li>
    </ol>
</div>

展示

  1. 2023.08.26由hexo转入typecho
  2. 2023-03-25由wp转入hexo
  3. 2023-03-24wp站点遭受DDos攻击
  4. 2023.02.12服务器由小厂转移至朋友的腾讯。网站迁移成功。
  5. 2023.01.29主机由香港迁入成都
  6. 2023.01.28备案成功
  7. 2022.12.16blog.xiangming.site 备案提上日程
  8. 2022.12.08个人博客又一次上线,希望这次10年的域名可以让我有动力坚持
  9. 2022.12.05购买虚拟主机1年“乐数云”香港主机19.9一年,?
  10. 2022.09.24购买域名:blog.xiangming.site .10年
📅 那年今日·09月04日
我们的农场
广告图片
AD
3 评论
    牛牛 Chrome 116 Windows 10 河南省郑州市
    2023年09月12日回复

    不错,谢谢分享!

    木木困玉光 Chrome 88 Android Q 广东省深圳市
    2023年09月05日回复

    不错呀,学习~

    提个手机端反馈
    因为刚才想去关于我页面查看下Demo,但手机端打开侧边栏,没有显示关于我界面,尝试滑动侧边栏也滑不动(滑动页面而不是侧边栏),可能没有考虑到手机端的设计,多出(溢出)部分直接隐藏了...,可以自己在手机端尝试下

      湘铭呀! Chrome 116 Android 福建省宁德市
      2023年09月05日回复

      @木木困玉光 谢谢,晚上收拾收拾

  • 小星星变奏曲 - 莫扎特
  • Moon River - Audrey Hepburn