WordPress的时间轴主题也是比较罕见的,大多数以单栏为主,今天正好看到typecho上出了一款单栏的时间轴主题,感觉还不错,想仿制并且弄成双栏的,本来已经仿得八九不离十了,不过由于响应式没法处理,最终放弃。

方法一

时间轴上面的轴可以用伪类before方法弄成宽度在10px左右的背景,这样就会在主体部分加载一条“轴”。

.content:before {
position: absolute;
top: 0px;
bottom: 0px;
left: 15%;
width: 10px;
background: none repeat scroll 0% 0% #AFDCF8;
content: "";
}

时间轴主题

方法二

可以使用图片,这个我参照了评论上和归档页面的时间轴样式。这个比较好理解,也是加背景图片,只不过图片是一条轴,可以PS。

.content{
background:url('时间轴图片地址') 5px -20px repeat-y;
position:relative;
padding:10px 0 15px 50px;
}

时间轴主题