使用LayUI创建时间轴效果-优快云博客

本文链接：https://blog.youkuaiyun.com/aihiao/article/details/113031894

1. 将时间抽象到二维平面, 垂直呈现一段从过去到现在的故事。

2. 时间线

2.1. 时间线使用

名称	组合
时间线	class="layui-timeline"
时间线项目	class="layui-timeline-item"
时间线图标	class="layui-icon layui-timeline-axis"
时间线内容	class="layui-timeline-content layui-text"
时间线内容标题	class="layui-timeline-title"

2.2. 图标可以任意定义(但并不推荐更改)。

2.3. 标题区域并不意味着一定要加粗。

2.4. 内容区域可自由填充。

3. 例子

3.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>时间线 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<ul class="layui-timeline">
  			<li class="layui-timeline-item">
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<div class="layui-timeline-content layui-text">
	      			<h3 class="layui-timeline-title">8月18日</h3>
			      	<p>
				        layui 2.0的一切准备工作似乎都已到位。发布之弦, 一触即发。
				        <br>不枉近百个日日夜夜与之为伴。因小而大, 因弱而强。
				        <br>无论它能走多远, 抑或如何支撑? 至少我曾倾注全心, 无怨无悔 <i class="layui-icon">&#xe6af;</i>
			      	</p>
   				</div>
  			</li>
  			<li class="layui-timeline-item">
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<div class="layui-timeline-content layui-text">
      				<h3 class="layui-timeline-title">8月16日</h3>
      				<p>杜甫的思想核心是儒家的仁政思想, 他有"<em>致君尧舜上, 再使风俗淳</em>"的宏伟抱负。个人最爱的名篇有:</p>
      				<ul>
				        <li>《登高》</li>
				        <li>《茅屋为秋风所破歌》</li>
      				</ul>
    			</div>
  			</li>
  			<li class="layui-timeline-item">
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<div class="layui-timeline-content layui-text">
      				<h3 class="layui-timeline-title">8月15日</h3>
      				<p>
				        中国人民抗日战争胜利72周年
				        <br>常常在想, 尽管对这个国家有这样那样的抱怨, 但我们的确生在了最好的时代
				        <br>铭记、感恩
				        <br>所有为中华民族浴血奋战的英雄将士
				        <br>永垂不朽
      				</p>
    			</div>
  			</li>
  			<li class="layui-timeline-item">
    			<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    			<div class="layui-timeline-content layui-text">
      				<div class="layui-timeline-title">过去</div>
    			</div>
  			</li>
		</ul>
	</body>
</html>

3.2. 效果图

011-时间线