Home Tech Tag Life

Home Tech Tag Life

html

Posts tagged with html

2025-06-01 实现一个时间轴目录

使用基本的html、css来实现一个简洁的时间轴

样式参考：Long Luo’s Life Notes

​实现方法有很多种，这里只给出此博客所用的方法。

以下图为例，时间轴由大圆、小圆和淡淡的竖线组成



HTML结构

timeline
::before
　　year
　　　　marker //圆点
//此处输入自定义文字
　　posts
　　　　post-link
　　　　　　marker //圆点
　　　　　　content
//此处输入自定义文字

圆形

圆形由svg实现：

<svg
    class="marker"
    //定义css类名
    xmlns="http://www.w3.org/2000/svg"
    //声明命名空间
    width="12"
    height="12"
    //图形长宽
>
    <circle cx="6" cy="6" r="6"></circle>
    //circle是一个svg的圆形元素
    //cx，cy：圆心的x，y坐标
    //r:半径
</svg>

数轴

数轴使用了伪元素，伪元素属于css，可以在一个元素中创建拥有特殊性质的元素，伪元素的一种典型的用法就是生成线条

.timeline::before {
    content: "";
    //必须设置content，否则元素不会显示
    position: absolute;
    //定位上下文
    bottom: -20px;
    //底面移动-20px，向下微调20px
    height: 100%;
    //长度为整个元素块
    width: 2px;
    //宽度
    background-color: rgb(240, 240, 240);
    //设置线条颜色
}

至此，一个简单的时间轴的骨架就完成了。



目前这个时间轴有以下几点问题

1. 竖线横跨了整个窗口
2. 小圆点没有和文字对齐
3. 小圆点被竖线覆盖了

以下是示例代码

//1.
.timeline{
    //这是因为将伪元素的position设置了absolute，默认会向上查找最近的static定位的元素
    //我们可以将timeline元素作为定位参考
    position:relative;
}
//2.
.post-link {
    display: flex;
    //可以让圆点和文字在同一行
    align-items: baseline;
	//这种对齐方式可以稍微让圆点回正一点
}
.post-link .marker {
    position: relative;
    //建立一个新的层叠上下文，让圆点覆盖竖线
    left: -2px;
    bottom: -2px;
    //对圆点位置进行微调
}

至此，这个时间轴就建好了，剩下的就是对其他元素进行样式优化就好了