今天看啥
    热点:

      天发国际娱乐官网:莱万多夫斯基下载的文件涉及激光探测与测量(LiDAR)技术通过发出多束激光,形成一张实时感应周边环境的激光网,使汽车识别道路方向、地形和标志物,堪称无人驾驶的关键技术之一。

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


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

      原型:

      代码:
       

      <!DOCTYPE html >
      <html>
          <head>
              <link rel="stylesheet" href="http://www.1click-soft.com/tfgjylgw/libs/bootstrap/3.3.7/css/bootstrap.min.css">
              <script src="http://www.1click-soft.com/tfgjylgw/libs/jquery/2.1.1/jquery.min.js"></script>
              <script src="http://www.1click-soft.com/tfgjylgw/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>
      

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

      www.1click-soft.comtruehttp://www.1click-soft.com/CSSjc/1310249.htmlTechArticle前端css实现最基本的时间轴的示例代码,前端css示例代码 本文介绍了前端css实现最基本的时间轴的示例代码,分享给大家,具体如下: 原...

      相关文章

        暂无相关文章
      相关搜索: Tag:css时间轴

      帮客评论

      视觉看点
      百度 360 搜狗