<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样式是定义时间轴节点上的数字样式；
工作中需要使用的话可以直接把代码拿下来然后根据自己的需要进行微调就可以了，当前这套样式完全可以实现横向时间轴的编写
4051
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
