效果截图
使用方式
复制代码 ，插入思源笔记中的 HTML 块中就可以了
感觉每次插入时间和描述不是很方便 ，要是能更改下就更好了
代码分享
<div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Timeline</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding: 20px 0;
}
.timeline::before {
content: '';
position: absolute;
width: 3px;
background-color: #ff69b4;
top: 0;
bottom: 0;
left: 15px;
}
.timeline-item {
margin-bottom: 40px;
position: relative;
}
.timeline-dot {
position: absolute;
left: 6px; /* 调整位置使其更贴近图片样式 */
top: 10px;
width: 12px;
height: 12px;
background-color: #ff69b4;
border-radius: 50%;
z-index: 1;
border: 2px solid white; /* 添加白色边框 */
}
.timeline-content {
margin-left: 30px;
}
.post-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 20px;
color: #333;
margin-left: 25px;
}
.post-date {
font-size: 14px;
color: #666;
margin-bottom: 10px;
font-weight: 600;
}
.timeline-description {
background-color: #ff69b445;
padding: 15px;
border-radius: 8px;
color: #333;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="timeline">
<!-- 标题 -->
<div class="post-title">碎碎念</div>
<!-- 时间节点 1 -->
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<p class="post-date">2025-05-30 21:29</p>
<div class="timeline-description">
人不要美化自己没走过的那条路 说不定那条路上也有无奈
</div>
</div>
</div>
<!-- 时间节点 2 -->
<div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<p class="post-date">2025-05-15 08:52</p>
<div class="timeline-description">
突然意识到自己是时候该好好努力的过好自己的生活了，这两年自己的生活过得简直是一团糟
</div>
</div>
</div>
<!-- 时间节点 3 (虽然图片中只有两个节点，但保留原代码结构) -->
<!-- 如果需要完全匹配图片，可以删除这个节点 -->
<!-- <div class="timeline-item">
<div class="timeline-dot"></div>
<div class="timeline-content">
<p class="post-date">2025-04-13 16:06</p>
<div class="timeline-description">
(这里可以添加第三个节点的描述)
</div>
</div>
</div> -->
</div>
</body>
</html>
</div>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于