WP知更鸟begin主题页面添加时间轴样式

2019年5月22日23:43:20 评论 400

时间轴样式,对站点更新日志,发展历程等最实用,知更鸟 begin 主题自带一个文章列表的归档用的就是时间轴,不过这是一个模板,自动获取的。本文添加的是页面时间轴,适合于任何页面

一、在主题下的 style.css 里面添加 CSS 代码

最好是放在后面,内容如下:

#teamnewslist ol {
	list-style:none;
	margin-left:36px;
	padding-left:14px;
	border-left:2px solid #eee;
	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;
}

二、在页面或文章中添加模板

这里需要将编辑器从可视化切换到文本模式,然后按照如下格式编辑:

<h4>
<span style="font-size: 20px; color: #99ccff;">
    <a style="color: #99ccff;">2019年</a>
</span>
</h4>
<div id="teamnewslist">
<ol>
    <li><b>02/21</b> 内容1111</li>
    <li><b>03/03</b> 内容2222</li>
    <li><b>08/11</b> 内容3333</li>
    <li><b>09/06</b> 内容4444</li>
    <li><b>11/14</b> 内容5555</li>
    <li><b>12/03</b> 内容6666</li>
</ol>
</div>

注意:添加新内容时,只需按格式一条一条的添加: <li><b>添加时间</b> 添加内容</li>

效果查看:关于小王  建站日志 标签WP知更鸟begin主题页面添加时间轴样式

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen: