前端css实现最基本的时间轴的示例代码

本文介绍了前端css实现最基本的时间轴的示例代码，分享给大家，具体如下：

原型：

代码：
 

    
 
 
 

 
 
 
     #timeleft div {
  height: 65px;
  color: #333333;
     }
     
     #timecenter div {
  height: 65px;
  color: #333333;
     }
     
     #timeright div {
  height: 65px;
  color: #333333;
     }
     
     #timeright div 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;
     }
 
 
    

    

 
 
     
  2012-12-24 8:00
  2012-12-24 8:00
  2012-12-24 8:00
  2012-12-24 8:00

     

     

  
      

   

   

   

   

      

  
     

     
  
      
完工交车
      
1小时
  
  
      
完工交车
      
1小时
  

  
      
完工交车
      
1小时
  
  
      
完工交车
      
1小时
  
     
 
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。