无作为
不仅仅是一种态度!

网站添加时光轴记录

来给网站添加一个时光轴的记录页面吧,有关于时光轴的教程无作为还分享了wordpress时光轴归档页面,

表示时光轴这个特效确实很好看,这里更是简单的利用teamnewslist标签,来给我的页面添加时光轴记录页面,

当然大家如果想要更加好看的样式可以自己写css或者百度搜索时光轴源码,然后自己添加即可,这里我们首先来看看效果吧:

效果还是不错的,不过样式在美化一点就更加好了,不过这样子也够了,简介好看,

为网站添加时光轴记录页面(wordpress为例)

教程不仅仅适用于wordpress,任何网站源码都行,是一个基础的html+css的操作,

首先是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>2016年04月</b>使用金馆长图片吹牛b,获得第一名</li>
 <li><b>2015年07月</b>使用金馆长图片吹牛b,又获得第一名</li>
 <li><b>2015年07月</b>使用金馆长图片吹牛b,再次获得第一名</li>
 <li><b>2015年07月</b>使用金馆长图片吹牛b,再一次获得第一名</li>
 <li><b>2015年06月</b>使用金馆长图片吹牛b,最后一次获得第一名</li>
</ol>
</div>

效果就是上面测试图的效果,大家可以自己更改,需要添加的也是直接复制黏贴即可,非常简单的一个教程,需要的就自己去添加属于自己的时光轴页面吧。

历史上的今天:
赞(21) 打赏
所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » 网站添加时光轴记录

留下评论 抢沙发

无作为-不仅仅是一种态度

登录/注册广告合作

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏