如何为我们的博客网站添加时光轴记录

原创 彭淇  2017-10-05 10:11:39  阅读 2243 次 评论 3 条

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

如何为我们的博客网站添加时光轴记录  加载 收藏 图形 网页 电脑 第1张

1、在我们所使用的主题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;}

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


<div id="teamnewslist">
    <ol>
        <li><b>2017年04月</b>本人购买第一台虚拟<a href="http://pengqi.club/" target="_blank">主机</a>,并上传文件启用。</li>
        <li><b>2017年05月</b>5月末购买了新域名,旧域名弃用,并同时进行备案申请。</li>
        <li><b>2017年06月</b>域名备案申请通过:<a title="pengqi.club" href="http://pengqi.club/%E4%BA%BA%E7%94%9F%E5%B8%B8%E8%AF%86/41.html" target="_blank">pengqi.club</a>。</li>
        <li><b>2017年08月</b>正式开通网站,更新内容<a title="更换主题" href="http://www.pengqi.club" target="_blank">更换主题</a>。</li>
        <li><b>2017年09月</b>9月末,网站APP制作完成,同时上架安智市场可在<a title="首页文章" href="http://pengqi.club/98.html" target="_blank">首页文章</a>,下载使用。</li>
    </ol>
</div>

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


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

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

本文地址:http://pengqi.club/blog/137.html
版权声明:本文为原创文章,版权归 彭淇 所有,欢迎分享本文,转载请保留出处!

发表评论


表情

评论列表

  1. 浪客小苏
    浪客小苏 【农民】  @回复

    不错,不错,等我回头到单位了,测试下好用不

  2. 唯美陌阡
    唯美陌阡 【县长】  @回复

    [code]签到成功!签到时间:2017/10/5 下午3:45:15,每日签到,生活更精彩![/code]