首页 技术教程,主题美化

由于本人记性不太好,和女朋友聊天时经常想不起来在什么时间发生了什么事,导致我很被动,所以,参考了一些资料,在我们的情侣小站上写了一篇文章,专门记录我们的恋爱历程。一来记录下我们的点点滴滴,二来也能让我及时回忆。其实实现的方法很简单,就是单纯的CSS样式,今天给大家分享一下。
请输入图片描述

效果如上图所示,因为是css样式写的,基本上博客主题都支持。请将下面的css代码添加到主题设置——自定义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: 140%;}
#teamnewslist li:hover{color: #555;}
#teamnewslist li:hover b::after{border-color: #0078e7;}
#teamnewslist li:hover b{color: #0078e7;}

在编辑页面或文章时,然后按以下格式编辑内容(因为 Typecho 默认 MarkDown 语法解析引擎的缘故,为了让HTML/CSS代码生效需要加入强制转换符!!!才能输出到网页前端而不被 MarkDown 语法解析)

<div id="teamnewslist">
    <ol>
        <li><b>2020年10月17日</b>通过朋友的介绍,我俩相识了</li>
        <li><b>2020年12月19日</b>经过一个多月的互相了解,我们最后在一起啦</li>
        <li><b>2020年12月27日</b>我第一次去找她,在她的学校里待了一天</li>
        <li><b>2021年1月1日</b>我们第二次见面,准确来说是约会。我们在一起吃了饭,又看了电影,嘻嘻</li>
    </ol>
</div>

PS:最后再次强调,在 Typecho 里使用上述代码的话,一定不要忘了!!!强制使用HTML/CSS解析转换符。
以后增加时光轴记录的时候,直接按照下面代码一条条记录增加即可。也可添加超链接哦。

<li><b>2021年11月20日</b>本篇文章由Nanndy撰写<a title="Nanndy's Blog" href="https://blog.fdnb.cn" target="_blank">Nanndy's Blog</a></li>

如果你有更简单更美观的方法,欢迎在评论区留言学习。




文章评论

    一位996程序员 访客ChromeWindows
    2021-12-2 10:07   回复

    加油祝福99!