本文主要和大家介绍了前端css实现最基本的时间轴的示例代码，分享给大家，给大家做个参考，希望能帮助到大家。
原型：
代码：
html >
<link>
<script></script>
<script></script>
<meta>
<title>状态详情</title>
<style>
#timeleft p {
height: 65px;
color: #333333;
}
#timecenter p {
height: 65px;
color: #333333;
}
#timeright p {
height: 65px;
color: #333333;
}
#timeright p p {
margin: 0 0 0px;
}
.cicle1 {
position: absolute;
top: 0px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
.cicle2 {
position: absolute;
top: 70px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
.cicle3 {
position: absolute;
top: 140px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
.cicle4 {
position: absolute;
top: 210px;
left: -10px;
border-radius: 10px;
list-style: none;
width: 20px;
height: 20px;
border: 1px solid #cccccc;
background: #ffffff;
}
</style>
<meta>
<!--右侧信息-->
<p>
</p><p>
</p><p>2012-12-24 8:00</p>
<p>2012-12-24 8:00</p>
<p>2012-12-24 8:00</p>
<p>2012-12-24 8:00</p>
<p>
</p><p>
</p>
完工交车
1小时
完工交车
1小时
完工交车
1小时
完工交车
1小时
相关推荐：
jquery去掉时间轴头尾部线条实例讲解
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
