纯CSS为博客网站添加时光轴记录

  • A+
所属分类:WP建设

在我们所使用的WordPress主题的style.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;}

在编辑页面或文章时,切换到文本模式, 然后按以下格式编辑内容:

<div id="teamnewslist">
<ol>
 	<li><b>2018年07月21日</b> 域名提交公安备案审核,至今仍无消息,处于待审核状态中</li>
 	<li><b>2018年07月19日</b> 域名通过管局备案审核,成功搬家至腾讯云</li>
 	<li><b>2018年07月10日</b> 域名提交ICP备案审核</li>
 	<li><b>2018年06月17日</b> 购买正版知更鸟Begin主题并启用</li>
 	<li><b>2018年05月18日</b> 更换域名www.huhexian.com,将longest.men跳转至新域名</li>
 	<li><b>2018年04月29日</b> 使用梦月酱2013年的主题:PureLove</li>
 	<li><b>2018年04月28日</b> 花了98元买了一年的香港主机,并赠送com域名,注册huhexian.com</li>
 	<li><b>2018年04月11日</b> 博客更名为:青山与绿水,使用Tokin的主题:Adams</li>
 	<li><b>2018年03月18日</b> 暂时选用老薛的太阳1号美国主机,博客诞生。暂定名为:最长的男人</li>
 	<li><b>2018年03月17日</b> 购买域名<a href="http://longest.men" target="_blank" rel="noopener">longest.men</a>现在已停用</li>
</ol>
</div>

以后增加时光轴记录的时候,就切换到文本模式按以下格式一条条记录增加即可。

1、具体效果,请移步《关于青山》。

2、由于这个时光轴仅仅是通过CSS来实现,所以在编辑时光轴记录的时候一定要严格按照相应的格式编写才行。

3、同样是因为时光轴是通过CSS来实现,所以任何博客网站,包括WordPress、zblog等程序建立的博客网站都可以按这个方法成功添加时光轴记录。(教程来自沈唁志博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: