制作简单的时间线
开发工具与关键技术:VS2015、layui使用
作者:易金亮
撰写时间:2019.05.16
时间线是个很好的东西,它可以帮助我们记录一些事情,形象而又客观,我们可以在很多地方看到时间线的使用,这里我就不一一举例了,下面我就来说说如何简单地制作时间线,这里我们要用到一个组件,那就是layui了,首先,我们要把layUI组件引入进来,如下截图所示:
如上截图所示,我们把layUI组件的CSS样式引入了进来,接下来就该去通过代码实现时间线效果了,这里主要用到了无序列表ul li,如下截图所示:
如上截图所示,我们在ul标签里面放入四个li标签,这四个li标签分别代表时间线上的结点,在ul标签上给它一个类“layui-timeline”,这个类代表时间线,li标签中的代码如下截图所示:
如上截图所示,我们先在li标签里放了一个i标签,这个i标签就是时间线上的小圆点,也就是结点标志了,然后再给它放一个div,里面放入需要在时间线上记录的数据,其具体样式就看给人爱好和需求了,通过以上代码,我们就实现了如下截图所示的一个简单的时间线了:
当然,实现时间线的方法不止这一种,在这里就不一一介绍了。