当前位置:首页 > 人生常识 > 正文内容

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

彭淇4年前 (2017-10-05)人生常识4429

我们玩独立博客的,都会有一个关于我们或个人档案的页面,专门用来记录我们折腾博客的一些重大事情。如果用时光轴来记录这些重大事情,可以让用户更加直观地看到我们的发展历程,这样对用户体验应该是有好处的。所以,今天就跟大家说一说如何为我们的博客网站添加时光轴记录,包括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="https://www.pengqi.club/" target="_blank">主机</a>,并上传文件启用。</li>
        <li><b>2017年05月</b>5月末购买了新域名,旧域名弃用,并同时进行备案申请。</li>
        <li><b>2017年06月</b>域名备案申请通过:<a title="pengqi.club" href="https://www.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="https://www.pengqi.club/98.html" target="_blank">首页文章</a>,下载使用。</li>
    </ol>
</div>

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


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

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

扫描二维码推送至手机端访问。

版权声明:本文由淇云博客发布,如需转载请注明出处。

本文链接:https://www.pengqi.club/blog/137.html

相关文章

初级网络工程师或网络管理员TOP 100问答

初级网络工程师或网络管理员TOP 100问答

1)什么是链接?链接是指两个设备之间的连接。它包括用于一个设备能够与另一个设备通信的电缆类型和协议。2)OSI参考模型的层次是什么?有7个OSI层:物理层,数据链路层,网络层,传输层,会话层,表示层和...

如何建立个人博客?

如何建立个人博客?

如何建立个人博客? 想必很多人都想建立一个,属于自己的个人博客,把自己的一些学习的经验和经历,通过互联网的形式来分享给别人。通过分享与网友进行互动,让更多的人了解和认识你,并且树立自己在...

支付宝当面付代开企业支付不过包退

支付宝当面付代开企业支付不过包退

代开说明1. 官方合作渠道开通,非套用营业执照;企业、个体商家、个人账号均可开通。2. 审核通过率高达95%以上,不过一律包退,正常工作日2-8小时过审,夜间不审,未满18周岁也可...

不会ps,不懂设计,专为小白用户量身打造的平面设计神器

不会ps,不懂设计,专为小白用户量身打造的平面设计神器

很多人可能在想,不会PS又想做一些简单的海报设计,社团需要好看的海报,但是找设计大神可能需要一定的经费,那今天博主给大家推荐几款,炒鸡好用的在线图片制作工具,不需要下载任何软件,也不需要你到处找素材!...

教你用一句js代码批量删除QQ空间说说

教你用一句js代码批量删除QQ空间说说

第一步打开QQ空间,点击说说那个选项 浏览器打开开发者工具(按F12,本人使用Chrome浏览器测试)  点击Console(控制台...

阿里云备案《通管局审核通过》的通知

阿里云备案《通管局审核通过》的通知

恭喜您,您的备案已经办理成功!         您的备案(订单号:25120539156)已经通过省通信管理局审核!...

评论列表

浪客小苏
4年前 (2017-10-13)

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

彭淇 回复:
@浪客小苏:OK
4年前 (2017-10-13)
唯美陌阡
4年前 (2017-10-05)

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

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。