文章目录
- 一、基本思路
- 二、具体实现
- 三、其他
如果有更好的思路或者建议，请务必在评论区告诉我。
一、基本思路
- 首先在最外层构建一个 box，用来包裹所有的 item
- 每一个子项拥有各自的元件，包括：line，icon，content
- 使用伪元素来创建 line 和 icon
- 把内容放在右边
二、具体实现
话不多说，直接上代码，仔细看注释。
.timeline {display: block;background-color: #fff;
}.timeline>.item {// 使用内填充将 content 定位到右边padding: 30px 15px 30px 60px;position: relative;display: block;z-index: 0;
}.timeline>.item::after {content: "";display: block;// 绝对定位到左边position: absolute;left: 30px;top: 0;width: 1px;background: #ddd;// 占满整个 item 的高度height: 100%;// 显示在 item 之上z-index: 8;
}.timeline>.item::before {// 伪元素的内容是 icon-fontcontent: '\F030'; display: block;background-color: #fff;// 设置伪元素的宽高和内容width: 25px;height: 25px;// 设置 icon 的大小font-size: 20px;// 将 icon 垂直居中line-height: 25px;// 将 icon 水平居中text-align: center;// 绝对定位到正确位置position： absolute;left: 15px;border: none;// 显示在 line 之上z-index: 9;
}.timeline>.item>.content {border: 1px solid #f1f1f1;display: block;line-height: 1.6;
}.timeline>.item>.content+.content {// 如果一个子项里有多个正文，则隔开它们margin-top: 10px;
}
三、其他
提供思路，具体实现需要看情况写代码。
item 的 color 值可以设置 icon 的颜色。
可以替换 icon 的内容，不只是替换伪元素的内容，也可以通过伪类、伪元素选择器来实现，如果 item 上没有其他类似 icon-name 的类，则伪元素的内容显示默认的。
同理，如果需要类似进度条的效果，可以通过 item 绑定 active 类，来动态实现 line 的变色。
