← 返回首页

Layui 时间线文档

📖 正文内容


时间线

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

    layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
    不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
    无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔

  • 8月16日

    杜甫的思想核心是儒家的仁政思想,他有“致君尧舜上,再使风俗淳”的宏伟抱负。个人最爱的名篇有:

    • 《登高》
    • 《茅屋为秋风所破歌》
  • 8月15日

    中国人民抗日战争胜利日
    铭记、感恩
    所有为中华民族浴血奋战的英雄将士
    永垂不朽

  • 过去

对应的代码code

  1. <ul class="layui-timeline">
  2. <li class="layui-timeline-item">
  3. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  4. <div class="layui-timeline-content layui-text">
  5. <h3 class="layui-timeline-title">8月18日</h3>
  6. <p>
  7. layui 2.0 的一切准备工作似乎都已到位。发布之弦,一触即发。
  8. <br>不枉近百个日日夜夜与之为伴。因小而大,因弱而强。
  9. <br>无论它能走多远,抑或如何支撑?至少我曾倾注全心,无怨无悔 <i class="layui-icon"></i>
  10. </p>
  11. </div>
  12. </li>
  13. <li class="layui-timeline-item">
  14. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  15. <div class="layui-timeline-content layui-text">
  16. <h3 class="layui-timeline-title">8月16日</h3>
  17. <p>杜甫的思想核心是儒家的仁政思想,他有“<em>致君尧舜上,再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有:</p>
  18. <ul>
  19. <li>《登高》</li>
  20. <li>《茅屋为秋风所破歌》</li>
  21. </ul>
  22. </div>
  23. </li>
  24. <li class="layui-timeline-item">
  25. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  26. <div class="layui-timeline-content layui-text">
  27. <h3 class="layui-timeline-title">8月15日</h3>
  28. <p>
  29. 中国人民抗日战争胜利72周年
  30. <br>常常在想,尽管对这个国家有这样那样的抱怨,但我们的确生在了最好的时代
  31. <br>铭记、感恩
  32. <br>所有为中华民族浴血奋战的英雄将士
  33. <br>永垂不朽
  34. </p>
  35. </div>
  36. </li>
  37. <li class="layui-timeline-item">
  38. <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
  39. <div class="layui-timeline-content layui-text">
  40. <div class="layui-timeline-title">过去</div>
  41. </div>
  42. </li>
  43. </ul>

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

  • 图标可以任意定义(但并不推荐更改)
  • 标题区域并不意味着一定要加粗
  • 内容区域可自由填充。

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

layui - 在每一个细节中,用心与你沟通

💡 示例代码

None

💭 技巧提示

💡
None

📚 参考资料

💬 评论交流

👤
用户 A 2026-03-25

这个技巧很实用,感谢分享!