html
Posts tagged with html
- 竖线横跨了整个窗口
- 小圆点没有和文字对齐
- 小圆点被竖线覆盖了
使用基本的html、css来实现一个简洁的时间轴
实现方法有很多种,这里只给出此博客所用的方法。
以下图为例,时间轴由大圆、小圆和淡淡的竖线组成
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.
.timeline{
//这是因为将伪元素的position设置了absolute,默认会向上查找最近的static定位的元素
//我们可以将timeline元素作为定位参考
position:relative;
}
//2.
.post-link {
display: flex;
//可以让圆点和文字在同一行
align-items: baseline;
//这种对齐方式可以稍微让圆点回正一点
}
.post-link .marker {
position: relative;
//建立一个新的层叠上下文,让圆点覆盖竖线
left: -2px;
bottom: -2px;
//对圆点位置进行微调
}
至此,这个时间轴就建好了,剩下的就是对其他元素进行样式优化就好了