本文介绍了前端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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
作者 / Krish Vitaldevara，Google Play 信任与安全产品管理总监 多年来，向数十...
CSS3实现酷炫的3D旋转透视 3D动画效果现在越来越普及，已经被广泛的应用到了各个...
打开软件，我们按快捷键ctrl+n，建立一个新的文件。 点击常用，选择布局。 点击...
背景 京东购物小程序作为京东小程序业务流量的主要入口，承载着许多的活动和页面...
最近在做项目时，发现CSS3中关于动画的技术，自己很少运用在项目中，平时一些列...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件，其次最...
一、作用 离线浏览 - 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联...
行高line-height实现单行文本垂直居中 以前一直认为单行文本垂直居中要将高度和...
在ie下设置 css 样式 style="cursor:hand;" 可以正常显示 但是在firefox下就不行...
在讲CSS优先级之前，我们得要了解什么是CSS，CSS是用来做什么的。 首先，我们对C...
