當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

011-时间线

發布時間：2025/4/17 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 011-时间线小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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"></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>中國人民抗日戰爭勝利72周年<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></body> </html>

3.2. 效果圖

總結

以上是生活随笔為你收集整理的011-时间线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

时间