<html>
<head>
<title>Time Line</title>
<style>
.timeline {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 351px;
height: 10px;
background-color: #ccc;
border-radius: 5px;
padding: 5px;
}
.timeline .node {
width: 10px;
height: 10px;
background-color: #000;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.timeline .node span {
position: absolute;
top: 13px;
left: 50%;
transform: translateX(-50%);
display: block;
text-align: center;
}
</style>
</head>
<body>
<div class="timeline">
<div class="node"><span>123</span></div>
<div class="node"><span>123</span></div>
<div class="node"><span>123</span></div>
<div class="node"><span>123</span></div>
<div class="node"><span>123</span></div>
</div>
</body>
</html>.timeline这个css样式是定义时间轴的样式；
.node这个css样式是定义时间轴节点的样式；
.span这个css样式是定义时间轴节点上的数字样式；
工作中需要使用的话可以直接把代码拿下来然后根据自己的需要进行微调就可以了，当前这套样式完全可以实现横向时间轴的编写
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
