typecho 添加时间轴

2023.09.04 技术 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>

展示

2023.08.26由hexo转入typecho
2023-03-25由wp转入hexo
2023-03-24wp站点遭受DDos攻击
2023.02.12服务器由小厂转移至朋友的腾讯。网站迁移成功。
2023.01.29主机由香港迁入成都
2023.01.28备案成功
2022.12.16blog.xiangming.site 备案提上日程
2022.12.08个人博客又一次上线，希望这次10年的域名可以让我有动力坚持
2022.12.05购买虚拟主机1年“乐数云”香港主机19.9一年，?
2022.09.24购买域名：blog.xiangming.site .10年

📅 那年今日·09月04日

愁