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

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

彭淇3年前 (2017-10-05)人生常识40163

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

相关文章

测测你的升职空间有多大呢?

测测你的升职空间有多大呢?

问题:你的升职空间有多大呢?这套测试题对你的情感驾驭能力、业务能力、精力充沛度、人际关系和谐度、跟上司沟通能力、竞争意识如何等等心理方面进行了综合测试,每道题只能选一个答案。...

robots对网站的作用是什么?如何利用robots删除死链?

robots对网站的作用是什么?如何利用robots删除死链?

Q1:已被百度抓取的死链,可以通过robots屏蔽的方式让百度删除吗? 不建议这样做,最快最有效的方法是通过百度站长平台 死链提交工具 进行处理...

CSS和JS实现动态华丽的奥运五环

CSS和JS实现动态华丽的奥运五环

    CSS和JS实现动态华丽的奥运五环效果预览 实现方法 HTML代码 <div...

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

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

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

如何为你的网站添加ICON小图标?

如何为你的网站添加ICON小图标?

可能有很多朋友不知道什么是网站ICON小图标,其实网站ICON小图标就是显示在标题前面的小图标。比如飞翔勿扰博客上面标题前面的这个图标就是ICON图标。不明白的朋友可以看图。...

新浪微博站长认证教程

新浪微博站长认证教程

新浪微博站长认证教程前几天博主试了一下微博认证,今天晚上居然过了,哈哈下面附上微博站长认证教程 准备材料:新浪微博账号一个两个橙V关注(博主居然有5个)备案域名一个   ...

评论列表

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

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

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

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

发表评论

访客

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