文件地址：

https://www.layui.com/demo/timeline.html

常規時間線：

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></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"></i>
      </p>
    </div>
  </li>


  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"
 
></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"></i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中國人民抗日戰爭勝利日
        <br>常常在想，儘管對這個國家有這樣那樣的抱怨，但我們的確生在了最好的時代
        <br>銘記、感恩
        <br>所有為中華民族浴血奮戰的英雄將士
        <br>永垂不朽
      </p>
    </div>
  </li>


  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">過去</div>
    </div>
  </li>
</ul>  

簡約時間線：

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">2018年，layui 5.0 釋出。並發展成為中國最受歡迎的前端UI框架（期望）</div>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">2017年，layui 里程碑版本 2.0 釋出</div>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">2016年，layui 首個版本釋出</div>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">2015年，layui 孵化</div>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">更久前，輪子時代。維護幾個獨立元件：layer等</div>
    </div>
  </li>
</ul>

結構：

首先需要一個總的時間線容器標籤

<ul class="layui-timeline">

每一個時間節點即一個列表項：

<li class="layui-timeline-item">

渲染時間線上的圓點：

<i class="layui-icon layui-timeline-axis"></i>--%>

時間節點中的內容的容器標籤：

<div class="layui-timeline-content layui-text">

簡約和常規的區別在於沒有標題標籤：

<h3 class="layui-timeline-title">8月18日</h3>

使用考慮：

如果需要描述的內容很多，內容複雜，則使用常規的

如果描述的內容簡單，數量少，則使用簡約