前端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>
原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知
90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。
有个很难涨粉的的公众号叫：【编程微刊】
前端css实现最基本的时间轴的更多相关文章
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- 纯CSS与HTML实现垂直时间轴
原创YouTube HTML源码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 08. Web大前端时代之：HTML5+CSS3入门系列 ~ QQ空间时间轴
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...
- 使用css实现时间轴
本文将使用css来实现一个左右交叉布局的时间轴,效果如下: 使用的都是一些常用的css,代码如下: <!DOCTYPE> <html> <head> <tit ...
- 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- 纯css+js水平时间轴
自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...
- [置顶] 纯手工打造漂亮的垂直时间轴，使用最简单的HTML+CSS+JQUERY完成100个版本更新记录的华丽转身！
前言 FineUI控件库发展至今已经有 5 个年头,目前论坛注册的QQ会员 5000 多人,捐赠用户 500 多人(捐赠用户转化率达到10%以上,在国内开源领域相信这是一个梦幻数字!也足以证明Fine ...
- 【前端图表】echarts实现散点图x轴时间轴
话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...
- html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果
1.概述 html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰.一目了然能够看清事情发生的过程,UI页面也显示的那么清晰.如何用css+html做出时间轴展示事件点的?先 ...
随机推荐
- PDF.Js的使用—javascript中前端显示pdf文件
PDF.Js的使用—javascript中前端显示pdf文件 写于2018/12/6 起因是一个图片展示页面需要展示pdf格式的文件,所以查了半天决定使用pdf.js,我也不求有多了解它,能实现我想要 ...
- vue 星星评分组件
显示评分和打分组件,可现实半颗星星效果 效果图: 参数名 类型 说明 score Number 分数 ,默认0,保留一位小数 disabled Boolean 是否只读,默认false,鼠标点击可以打 ...
- JSP语法基础(一)
一.JSP页面中的凝视 (1)HTML凝视 <!-- comment [ <%=expression %> ] --> 能在client显示的一种凝视,标记内的全部JSP脚本元 ...
- java中volatile关键字的含义--volatile并不能做到线程安全
在Java线程并发处理中,有一个关键字volatile的使用目前存在很大的混淆,以为使用这个关键字,在进行多线程并发处理的时候就可以万事大吉. Java语言是支持多线程的,为了解决线程并发的问题,在语 ...
- javascript中的this指向问题总结
this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象 1.函数执行的时候,首先看函数名前边是否有点 ‘·’,有的话点’ ...
- vue 图片lazyload
今天看到我一醉哥的一篇朋友圈分享:<不如我们从头来过 | 掘金> 看完之后,百感交集,互联网的浪潮使创业公司如雨后春笋般崛起, 每一个初创公司都会有一群怀着美好愿景的小伙伴, 但是当寒冬来 ...
- git各种命令 & git merge和git rebase的区别
git merge 和 rebase的区别: http://blog.csdn.net/jollyjumper/article/details/24743751 对于两个分支而言,rebase和mer ...
- 8.6 Android灯光系统_源码分析_背光灯
Change system screen brightness, using android.provider.Settings.System.SCREEN_BRIGHTNESSandroid-er. ...
- ZOJ 1076 Gene Assembly LIS
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=76 题目大意: 题目前面都是废话. 给你一串基因,然后给你上面的外显子的起始和终 ...
- [Angular2 Form] patchValue, setValue and reset() for Form
Learn how to update part of form model, full form model and reset whole form. We have form definetio ...