【WordPress 教程】添加时光轴记录网站发展历程

2019年4月17日17:21:59 3 4,640
摘要

我们玩独立博客的,都会有一个关于我们或个人档案的页面,专门用来记录我们折腾博客、网站的一些重大事情或者发展历程。如果用时光轴来记录这些重大事情,可以让用户更加直观地看到我们的发展历程,这样对用户体验应该是有好处的。所以,今天就跟大家说一说如何为我们的博客网站添加时光轴记录,包括WordPress、zblog等程序建站的都可以。

【效果展示】

  1. XXXX年XX月内容内容,内容。
  2. XXXX年XX月内容。
  3. XXXX年XX月内容:内容
  4. XXXX年XX月内容内容
  5. XXXX年XX月内容内容,内容。

【操作步骤】

1、在我们所使用的WordPress主题的style.css文件最后面添加以下代码
  1. /* 站点动态时间轴 */
  2. #teamnewslist ol{list-style:none;margin-left36px;padding-left14px;border-left2px solid #eee;font-size18px;color#666;}
  3. #teamnewslist b{font-size12px;font-weightnormal;color#999;displayblock;positionrelative;margin-bottom:5px;}
  4. #teamnewslist b::after{positionabsolute;top6px;left: -22px;content'';width14px;height14px;border-radius: 50%;background-color#fff;border2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
  5. #teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
  6. #teamnewslist li:hover{color#555;}
  7. #teamnewslist li:hover b::after{border-color#C01E22;}
  8. #teamnewslist li:hover b{color#C01E22;}
此处为隐藏的内容!
发表评论并刷新,方可查看
3、以后增加时光轴记录的时候,就切换到文本模式按以下格式一条条记录增加即可。
  1. <li><b>XXXX年XX月</b>内容<a href="https://www.7585.net.cn" target="_blank">内容</a>,内容。</li>

【温馨提示】

  • 由于这个时光轴仅仅是通过CSS来实现,所以在编辑时光轴记录的时候一定要严格按照相应的格式编写才行。
  • 同样是因为时光轴是通过CSS来实现,所以任何博客网站,包括WordPress、zblog等程序建立的博客网站都可以按这个方法成功添加时光轴记录。

发表评论

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

目前评论:3   其中:访客  3   博主  0

    • 北熙宝宝° 北熙宝宝°

      有形的东西迟早会凋零,但只有回忆是永远不会凋零的。— 纲手《火影忍者》

      • 啦啦啦 啦啦啦

        啦啦啦

        • small2star small2star

          学习一下