使用CSS实现时间轴展示效果

先看最终效果：

制作思路：

在timeline里每一行使用dl标签布局；每行(dl)左侧的边框使用border-left绘制。左侧圆形使用dt布局，我们可以使用border给dt加边框，使用border-radius绘制圆形效果，右侧文字使用dd排列。

html布局代码如下：

<div class="timeline">

<dl>

<dt class="on"></dt>

<dd>

<h3>管家接单中</h3>

<p>2021-04-21 14:47:56.0</p>

</dd>

</dl>

<dl>

<dt></dt>

<dd>

<h3>已派单</h3>

<p></p>

</dd>

</dl>

<dl>

<dt></dt>

<dd>

<h3>已完成</h3>

<p></p>

</dd>

</dl>

</div>

css样式代码：

.timeline{ padding: 1rem 0;}

.timeline dl{border-left:1px solid #eee; position:relative; margin:0 0 0 .5rem; height: 5rem;}

.timeline dl dt{ position: absolute; left: -.5rem; top:0rem; width:.5rem; height: .5rem; border-radius: .5rem; border:2px solid #eee; background-color: #fff;}

.timeline dl dt.on{border:2px solid #FF8800;}

.timeline dl dd{ position: absolute; left: 1rem; top:0rem;}

.timeline dl dd h3{font-size:1.1rem; font-weight:600; padding:0 0 .5rem 0; color: #333333;}

.timeline dl dd p{ color: #949494;}

.timeline dl:last-child{border-left:none; }

说明：定义dl样式的时候position一定要使用relative。因为后面我们需要给里面的dt和dd使用绝对定位。

dt标签里，position：absolute代表使用绝对定位。left位置为-.5rem代表向左负的0.5rem（这里我使用的rem单位 ，你们使用px的话，就写具体的px 值）。宽和高也同时是.5rem。然后为了绘制圆形设置border-radius也是.5rem。边框使用border属性设置宽度为2px。

dd标签里，同样设置position:absolute使用绝对定位。设置left为1rem（代表距离左边界1rem）。

然后我们看到最后一个dl左边是没有边框的，如下图箭头所示：

这个是通过：.timeline dl:last-child{border-left:none; }设定的。

如果没有这行，效果就是这边的样子了：