css实现简单时间轴的实例代码

2020-11-27 来源：星星旅游

本文主要和大家介绍了前端css实现最基本的时间轴的示例代码，分享给大家，给大家做个参考，希望能帮助到大家。

原型：

代码：

<!DOCTYPE html >
<html>
 <head>
 <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <meta charset="UTF-8">
 <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 content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
 </head>

 <body>

 <!--右侧信息-->
 <p class="col-md-10 col-sm-10 col-xs-10" style="margin-top:30px;">
 <p class="col-md-4 col-sm-4 col-xs-4" id="timeleft">
 <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 class="col-md-4 col-sm-4 col-xs-4" id="timecenter">

 <p style="height:212px; border-left:1px solid #366595; position:absolute; left:65px;">
 <ul>
 <li class="cicle1"></li>
 <li class="cicle2"></li>
 <li class="cicle3"></li>
 <li class="cicle4"></li>
 </ul>

 </p>
 </p>

 <p class="col-md-4 col-sm-4 col-xs-4" id="timeright">
 <p>
 <p>完工交车</p>
 <p>1小时</p>
 </p>
 <p>
 <p>完工交车</p>
 <p>1小时</p>
 </p>

 <p>
 <p>完工交车</p>
 <p>1小时</p>
 </p>
 <p>
 <p>完工交车</p>
 <p>1小时</p>
 </p>
 </p>
 </p>
 </body>
</html>

全部栏目

css实现简单时间轴的实例代码