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

来源：www.45fan.com 2018-03-18 17:01:59

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

原型：

前端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 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;
      }
    </style>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
  </head>

  <body>

    <!--右侧信息-->
    <div class="col-md-10 col-sm-10 col-xs-10" style="margin-top:30px;">
      <div class="col-md-4 col-sm-4 col-xs-4" id="timeleft">
        <div>2012-12-24 8:00</div>
        <div>2012-12-24 8:00</div>
        <div>2012-12-24 8:00</div>
        <div>2012-12-24 8:00</div>

      </div>

      <div class="col-md-4 col-sm-4 col-xs-4" id="timecenter">

        <div 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>

        </div>
      </div>

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

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

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

路由器

电脑

手机

网络

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

推荐阅读