制作简单的时间线

制作简单的时间线

开发工具与关键技术：VS2015、layui使用
作者：易金亮
撰写时间：2019.05.16

时间线是个很好的东西，它可以帮助我们记录一些事情，形象而又客观，我们可以在很多地方看到时间线的使用，这里我就不一一举例了，下面我就来说说如何简单地制作时间线，这里我们要用到一个组件，那就是layui了，首先，我们要把layUI组件引入进来，如下截图所示：

如上截图所示，我们把layUI组件的CSS样式引入了进来，接下来就该去通过代码实现时间线效果了，这里主要用到了无序列表ul li,如下截图所示：

如上截图所示，我们在ul标签里面放入四个li标签，这四个li标签分别代表时间线上的结点，在ul标签上给它一个类“layui-timeline”，这个类代表时间线，li标签中的代码如下截图所示：

如上截图所示，我们先在li标签里放了一个i标签，这个i标签就是时间线上的小圆点，也就是结点标志了，然后再给它放一个div，里面放入需要在时间线上记录的数据，其具体样式就看给人爱好和需求了，通过以上代码，我们就实现了如下截图所示的一个简单的时间线了：

当然，实现时间线的方法不止这一种，在这里就不一一介绍了。