专栏首页沈唁志纯CSS为博客网站添加时光轴记录

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

我们玩独立博客的,都会有一个关于或发展历程的页面,专门用来记录我们折腾博客的一些重大事情。如果用时光轴来记录这些重大事情,可以让用户更加直观地看到我们的发展历程,这样对用户体验应该是有好处的。看了好几个博客站,都有一个发展历程的页面,自己也做过这样一个页面,但是没有别人的特效样式,就纯一个项目序号列表,觉得有点丑,所以今天抽空改了一下页面样式。

  • 在我们所使用的 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>2017 年 10 月 12 日</b> 变更信息通过 并提交公安备案</li>  
  <li><b>2017 年 9 月 28 日</b> 提交变更域名信息 将网站名由 祭雨流樱网 更改为 唁哥哥的 Blog</li>  
  <li><b>2017 年 9 月 6 日</b> HTTPS 配置成功 全站使用 HTTPS 访问</li>  
  <li><b>2017 年 09 月 01 日</b> 使用 WordPress 模板+C7V5 主题 搭建博客</li>  
  <li><b>2017 年 09 月 01 日</b> 服务器由 Windows 系统换为 Linux 系统</li>  
  <li><b>2017 年 04 月 27 日</b> 腾讯云 SSL 证书审核通过</li>  
  <li><b>2017 年 02 月 25 日</b> 腾讯云安全认证通过 出现安全域名样式</li>  
  <li><b>2017 年 02 月 08 日</b> 购买域名<a href="https://qq52o.me/" target="_blank" >qq52o.me</a> 提交备案</li>
 </ol>
</div>
  • 以后增加时光轴记录的时候,就切换到文本模式按以下格式一条条记录增加即可。
 <li><b>2017 年 10 月 13 日</b> 注册沈唁志微信订阅号</li>

温馨提示:

1、具体效果,请移步《发展历程》。

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

3、同样是因为时光轴是通过 CSS 来实现,所以任何博客网站,包括 WordPress、zblog 等程序建立的博客网站都可以按这个方法成功添加时光轴记录。 沈唁志|一个PHPer的成长之路! 原创文章采用CC BY-NC-SA 4.0协议进行许可,转载请注明:转载自:纯CSS为博客网站添加时光轴记录

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • PHP简单判断手机设备的方法

    沈唁
  • 简单配置.htaccess就可以实现的几个功能

    沈唁
  • 各种IE(IE6-IE10)兼容问题一行代码搞定

    沈唁
  • 0行JS,30行css搞定导航栏下划线跟随效果

    在码代码之前了,我们可以尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果?

    Javanx
  • 【内容引起舒适】让你的Jupyter Notebook不再辣眼睛

    当时觉得jupyter notebook难看的时候,我就寻思有没有大神做过某些工具来更改样式,毕竟肯定不止我一个人觉得丑,程序员越牛逼,往往Ta就越挑剔。果不其...

    beyondGuo
  • 人工智能被批不环保,训练一个神经网络的排炭量竟然比5辆车还多?

    1970年,赞比亚修女Mary Jucunda给NASA(美国航空航天局)Marshall太空航行中心的科学副总监Ernst Stuhlinger博士写了一封信...

    大数据文摘
  • 设计师会编程、程序员懂艺术之设计规范

    以下为正文 UI&UX类的设计规范,不像建筑设计、工业设计那样,有比较成熟权威的设计规范。大多是各家发布的设计规范,用于自家产品、品牌的设计复用。 本文从 设计...

    mixlab
  • 第87天:HTML5中新选择器querySelector的使用

    1、document.querySelector("selector"); selector:根据CSS选择器返回第一个匹配到的元素,如果没有匹配到,则返回nu...

    半指温柔乐
  • Spark Tungsten in-heap / off-heap 内存管理机制前言

    分析方式基本是自下而上,也就是我们分析的线路会从最基础内存申请到上层的使用。我们假设你对sun.misc.Unsafe 的API有一些最基本的了解。

    用户2936994
  • 企业邮件安全防护实践

    邮件系统作为一种有效的内外部工作沟通平台,在企业内得到广泛使用。同时,广告邮件、垃圾邮件、钓鱼邮件等问题就成了企业邮件安全头号难题。所以我们的企业安全人员以往更...

    FB客服

扫码关注云+社区

领取腾讯云代金券