timeline时间轴进度“群英荟萃”

 是日,无论PC项目还是APP,都涉及到了通常称谓的“时间轴”UI展现布局。
产品和设计师都喜欢横向、纵向的时间轴来传达产品的寓意。
如此,如斯!总结一套 timeline时间轴 大家族的“群英荟萃”。
 
1.时间轴进度条-PC版
 
结构简单的如下:
<div class="pub-wrap">
<ul class="pub-process">
<li class="active"><span class="ball">1天</span></li>
<li class="active"><span class="ball">2天</span></li>
<li><span class="ball">3天</span></li>
<li><span class="ball">4天</span></li>
<li><span class="ball">5天</span></li>
</ul>
</div>
父元素ul采取display: -webkit-box;盒子模型设置。子元素-webkit-box-flex: 1;这样设置来实现均分。
注意这里,使用旧版本的语法即可简单实现不要在添加新的版本flex语法去实现,那样很绕的。
2.timeline时间轴进度条-移动版
 
 
 
结构同上1
 
3.timeline-水平text-align版
 
 
<div class="step">
<i class="active">1</i>
<i>2</i>
<i>3</i>
<i>4</i>
<i>5</i>
<i>6</i>
<i>7</i>
<!--[if lte IE 7]>
         <b></b><![endif]-->
</div>
父元素设置text-align: justify;子元素设置display: inline-block;即可实现两端对齐的时间轴显示
 
4.横向timeline时间轴
 
<div class="wrapper">
<ul class="timeline">
<li>
<h3 class="time">2016/08/08<br/>预约中</h3>
</li>
<li>
<h3 class="time">2016/08/09<br/>办理中</h3>
</li>
<li>
        <h3 class="time">2016/08/10<br/>完成</h3>
</li>
</ul>
</div>
子元素设置display: inline-block;。padding撑开间距即可实现
 
5.纵向timeline右边内容
 

 <div class="wrapper">
   <ul class="timeline">
      <li>
         <h4>我是标题</h4>
        <p>我是内容我是内容我是内容我是内容我是内容</p>
       </li>
       <li>
        <h4>我是标题</h4>
             <p>我是内容我是内容我是内容我是内容我是内容</p>
       </li>
  </ul>
</div>
li里面的h4 标签的after伪类元素背景设置width:2px;height:100%;banckground:#d7bb67;来实现边线颜色框
li里面的h4标签的before伪类元素来 实现圆点
 
6.纵向timeline左右内容
 
 

 <div class="wrapper">
   <ul class="timeline">
      <li>
        <h3 class="time">10.08日<br/>08:22</h3>
        <h4>我是标题</h4>
        <p>我是内容我是内容我是内容我是内容我是内容</p>
       </li>
       <li>
        <h3 class="time">10.08日<br/>08:22</h3>
        <h4>我是标题</h4>
        <p>我是内容我是内容我是内容我是内容我是内容</p>
       </li>
   </ul>
 </div>
其他样式同上,左边的时间通过定位absolute到时间轴线条的左边即可.
 
以上是时间轴汇总,详情可见附件文件夹。按需使用即可,无论横向、纵向,抑或是带有时间及内容,总有一款适合你的。
清晰明了,可扩展,兼容性良好!
 
以上汇总,多谢群内@小志 @evan @zyx @lost @yangnan @一棵树  等帮忙指点,得以完善
 
下载地址:http://files.cnblogs.com/files/leshao/timeline%E6%97%B6%E9%97%B4%E8%BD%B4%E8%BF%9B%E5%BA%A6%E2%80%9C%E7%BE%A4%E8%8B%B1%E8%8D%9F%E8%90%83%E2%80%9D.rar

timeline时间轴进度“群英荟萃”的更多相关文章

  1. vue使用iview Timeline 时间轴不显示问题

    vue Timeline 时间轴不显示渲染的效果 官网代码 <Timeline pending> <TimelineItem>发布1.0版本</TimelineItem& ...

  2. iOS之TimeLine(时间轴)的实现

    这是一个关于OC时间轴的简单实现,我认为重要的是思路. 感谢作者:Cyandev 的文章<iOS 实现时间线列表效果>给的思路.这里先附上Objective-C的代码实现,有时间再去试试S ...

  3. fiddler笔记:TimeLine时间轴选项卡

    1.TimeLine选项卡介绍 TimeLine选项卡支持使用"瀑布"模型查看1~250个选中的Session.主要用于帮助性能分析和理解请求之间的关联.选项卡的主体内容是数据流视 ...

  4. [原创]首次制作JQueryUI插件-Timeline时间轴

    特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...

  5. Jquery实现超酷的时间轴特效

    Timeline时间轴Jquery特效是一款现在互联网上非常流行的一种布局结构,结合了瀑布流布局,最近很多网友问到这种特效,网站上有网友们分享过一款,功能虽然实现,但样式不太好看,今天就把它整理出来分 ...

  6. Timeline Portfolio - 时间轴作品集效果

    这里分享一个超炫的时间轴展示作品集效果.设计师和前端开发人员可以借助这个效果来制作新颖的作品集和个人简历.时间轴专门用来呈现出年代的一系列事件.您可以把这种效果嵌入各种媒体,包括微博,视频和地图,并把 ...

  7. 超炫的时间轴jquery插件Timeline Portfolio

    Timeline Portfolio是一款按时间顺序专业显示事件的jquery时间轴插件,可以根据时间的先后嵌入各种媒体包括微博,视频和地图等.这个展现的模式非常适合设计师的作品集和个人简历的展示.T ...

  8. Alamofire源码解读系列(十二)之时间轴(Timeline)

    本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...

  9. 横向、纵向时间轴timeline系列

    近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...

随机推荐

  1. json数据导出excel

    最近做的一个项目涉及到把数据导出到excel里面,网上找来找去,最终找到两种办法,废话不多说了 第一种: 拿到表格的id就可以抓取表格的数据,导出到excel,这种方式简单粗暴,引入这两个插件即可. ...

  2. apply/call/bind的区别与用法

    apply 方法/call 方法 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是 ...

  3. JavaScript实现AOP(面向切面编程)

    什么是AOP? AOP(面向切面编程)的主要作用是把一些跟核心业务逻辑模块无关的功能抽离出来,这些跟业务逻辑无关的功能通常包括日志统计.安全控制.异常处理等.把这些功能抽离出来之后, 再通过" ...

  4. 走近Java

    学习Java需要了解必要的Java历史,不要觉得Java历史对学习Java编程没有任何帮助.在任何时候,了解一门语言的历史都能帮助更好地理解这门语言的精髓.以前在学习语文时,在分析一篇文章,通常会通过 ...

  5. svn服务器的搭建与使用二

    转载出处 上一篇介绍了VisualSVN Server和TortoiseSVN的下载,安装,汉化.这篇介绍一下如何使用VisualSVN Server建立版本库,以及TortoiseSVN的使用. 首 ...

  6. SQL-删除重复记录

    前几日工作的时候,有个小需求,是要求删除一个表table_A里的重复记录(保留一条),假设以字段COL_PK重复来判断记录重复,那么有几种写法: 在Oracle里,可以利用rowid来删除,这是非常高 ...

  7. 直接编译caffe出现的两个问题

    工控机的环境之前已经配置好ubuntu14.04+CUDA7.5+cuDNN v4,再加opencv3.1.要用ResNet做分类,需要重新编译一个caffe框架.下载BVLC/caffe,接着修改M ...

  8. JAVA入门[17]-ControllerAdvice处理exception

    1.关于@ControllerAdvice @ControllerAdvice注解本身已经使用了@Component,因此@ControllerAdvice注解所标注的类将会自动被组件扫描获取到,就像 ...

  9. 一位10年Java工作经验的架构师聊Java和工作经验

    从事近十年的 JavaEE 应用开发工作,现任阿里巴巴公司系统架构师.对分布式服务架构与大数据技术有深入研究,具有丰富的 B/S 架构开发经验与项目实战经验,擅长敏捷开发模式.国内开源软件推动者之一, ...

  10. java 对象的初始化过程

    PersonDemo p=new PersonDemo("lisi",20);这句话都做了什么事情? 因为new用到了PersonDemo.class,所以会先找到PersonDe ...