当前位置: 首页 >>前端开发 >>LayUi教程 >>LayUi时间线教程

LayUi时间线教程

时间:2021/10/31 7:50:00 【admin】

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


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

快速使用

image.png

对应的代码code

<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"></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>

      

关于时间线,似乎也没有什么太多可介绍的东西。你需要留意的是以下几点


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

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

内容区域可自由填充。

结语

授之以鱼不如授之以渔,时间线怎么用,就看你的了。

扩充阅读

相关文章

CopyRight:2007-2018 编程语言吧 备案ICP:湘ICP备09009000号-15 http://www.yuyanba.com

分享按钮