jimdo怎么插入html5时间轴_jimdo时间轴html5代码与节点样式【实操】

Jimdo网站需用自定义HTML5代码实现时间轴：一、内联HTML+CSS轻量嵌入；二、外链CSS+语义化HTML便于复用；三、调用timeline-js-lite库支持交互；四、纯CSS方案零依赖高性能。

如果您希望在 Jimdo 网站中呈现可视化的时间发展脉络，但默认编辑器不支持原生时间轴组件，则需通过自定义 HTML5 代码嵌入实现。以下是可直接部署的多种时间轴插入方法：

一、使用内联 HTML5 + CSS 内嵌时间轴

该方法将 HTML 结构与基础样式写入同一代码块，适用于单页轻量展示，无需外部依赖，兼容 Jimdo 的自定义 HTML 模块。

1、进入 Jimdo 编辑页面，点击“添加区块” → 选择“HTML/JavaScript”模块。

2、粘贴以下完整代码（含结构、样式与响应式适配）：

立即学习“前端免费学习笔记（深入）”；

2020年

项目启动

2022年

完成首期交付

3、点击“保存”，刷新页面查看效果。

二、引入外部 CSS 文件 + 简洁 HTML 结构

该方法将样式抽离为独立 CSS 规则，便于多处复用及后期维护；需借助 Jimdo 支持的自定义 CSS 入口或 CDN 链接。

1、前往 Jimdo 后台 → “设置” → “网站设置” → “自定义 CSS”，粘贴以下样式：

.jimdo-timeline{counter-reset:step;}.jimdo-timeline-item{position:relative;padding-left:70px;margin-bottom:28px;}.jimdo-timeline-item::before{content:counter(step);counter-increment:step;position:absolute;left:0;top:0;width:48px;height:48px;line-height:48px;text-align:center;font-weight:bold;background:#2ecc71;color:white;border-radius:50%;}.jimdo-timeline-item h4{margin:0 0 6px 0;font-size:1.05em;color:#2c3e50;}.jimdo-timeline-item time{display:block;font-size:0.85em;color:#95a5a6;margin-bottom:6px;}

2、在页面中插入 HTML/JavaScript 模块，仅保留语义化结构代码：

2021年3月

原型设计完成

完成用户流程与界面线框图

标签： css javascript java html js html5 伪元素 npm cdn .net yy