一个时间轴的组成

  1. 使用一个块级元素包裹内容,并未块级元素设置边框
  2. 定义圆形或者菱形等元素标签,子元素设置偏移或者定位元素将图标定位到边框上
  3. 使其中的内容不溢出,自动换行,内容自动撑高

    英文自动换行:word-wrap:break-word;word-break:break-all

时间轴样式部分

使用时需要注意可能继承的样式会给li:after等伪类元素设置样式而造成效果异常

css中定义了一个圆形的图标class="yuan",一个菱形的图标class="diamond"

 <style>
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}
.ym-timeline{display:block}
.ym-timeline ul{margin-left:30px;border-left:2px solid green;padding:0}
.ym-timeline ul li{width:100%;margin-left:-12px;line-height:20px;font-weight:narmal;list-style:none}
/*圆形图标*/
.ym-timeline ul li span.yuan{width:8px;height:8px;background:#fff;border:2px solid green;margin:5px;border-radius:6px;-webkit-border-radius:6px;-moz-border-radius:6px;overflow:hidden;display:inline-block;float:left}
/*菱形图标*/
.ym-timeline ul li span.diamond{width:8px;height:8px;background:#fff;border:2px solid green;margin:5px;overflow:hidden;display:inline-block;float:left;transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg)}
.ym-timeline ul li span.stime{padding-left:7px;font-size:12px;line-height:20px;color:green}
.ym-timeline ul li .ym-tl-content{padding:10px 0 10px 20px;font-size:14px;line-height:25px;word-wrap:break-word;word-break:break-all}
.ym-timeline ul li:first-child span.diamond,.ym-timeline ul li:first-child span.yuan{margin-top:0}
.ym-timeline ul li:last-child span.diamond,.ym-timeline ul li:last-child span.yuan{margin-top:8px}
.ym-timeline ul li .ym-tl-content img{max-width:100%;}
</style>

时间轴html结构

  <!--效果预览http://runjs.cn/code/6udflsbt-->
<div class="ym-timeline">
<ul>
<li> <span class="diamond"></span> <span class="stime">2017-07-17</span>
<div class="ym-tl-content">
是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束
</div> </li>
<li> <span class="diamond"></span> <span class="stime">2017-07-18</span>
<div class="ym-tl-content">
是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束
</div> </li>
<li> <span class="diamond"></span> <span class="stime">2017-07-19</span>
<div class="ym-tl-content">
是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束
</div> </li>
<li> <span class="diamond"></span> <span class="stime">2017-07-20</span>
<div class="ym-tl-content">
是开始 ttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest testtesttesttesttesttesttesttesttesttesttestt 亦是结束
</div> </li>
<li> <span class="yuan"></span> <span class="stime"></span> </li>
</ul>
</div>

效果预览

完整代码

一个简单的时间轴demo的更多相关文章

  1. 一个简单的webservice的demo(下)winform异步调用webservice

    绕了一大圈,又开始接触winform的项目来了,虽然很小吧.写一个winform的异步调用webservice的demo,还是简单的. 一个简单的Webservice的demo,简单模拟服务 一个简单 ...

  2. 一个简单的Webservice的demo(中)_前端页面调用

    首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...

  3. 一个简单的Webservice的demo,简单模拟服务

    前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...

  4. 用vue实现一个简单的时间屏幕

    前言 去年用了一个小的 app,叫做 一个木函,本来想着用来做动画优化就删掉了的,不过看到他有个时间屏幕的小工具,就点进去看了下,觉得挺好玩的,就想着能不能自己实现一下. ps: 闲话不多说,先上例子 ...

  5. 用idea搭建一个简单的SSM的Demo

    1.新建一个maven  web app项目 结构如下 resources的资源文件如下 applicationContext.xml 的配置 <?xml version="1.0&q ...

  6. 一个简单的servlet的demo

    javaweb  的应用我们需要参考javaee  api 查找servlet接口 javax.servletInterface Servlet All Known Subinterfaces: Ht ...

  7. 一个简单的Socket通信Demo

    服务器端Demo: Server.java(服务器端运行主程序,直接运行): package cn.wjs; import java.net.InetAddress; import java.net. ...

  8. 一个简单的使用restc demo

    最近不经意间看到饿了么团队开发的restc,接口调试工具(类似postman),其实调试接口都没用过工具,每次都只是运行起项目直接调接口.闲来无事,看到restc,就决定试试,后面觉得挺不错的,就分享 ...

  9. axis2与eclipse的整合:开始一个简单的axis2 的demo

    1.下载axis2,现在axis2最新版本是axis2-1.6.2,下载地址:http://axis.apache.org/axis2/java/core/download.cgi 2.下载好的zip ...

随机推荐

  1. 中文分词中的战斗机-jieba库

    英文分词的第三方库NLTK不错,中文分词工具也有很多(盘古分词.Yaha分词.Jieba分词等).但是从加载自定义字典.多线程.自动匹配新词等方面来看. 大jieba确实是中文分词中的战斗机. 请随意 ...

  2. Linux常用命令-jdk和Tomcat

    一.JDK的安装和配置 1.下载jdk文件 去官方网站下载Linux 64位  jdk-8u131-linux-x64.tar.gz 2.使用Ftp工具上传到/usr/local 下. 使用命令:ta ...

  3. Detailed Information for Outputted Files from Somatic Mutation Annotators(annovar 注释文件条目详细解释)

    CONTENTS *_annoTable.txt (ANNOVAR) *_annoTable.txt (SnpEff) *_genelist.txt (ANNOVAR & SnpEff) db ...

  4. 自己动手实现html去标签和文本提取

    随意观看 [TOC] 工具 python3.6 正则表达式(别的语言思路一样,容易借鉴) python正则表达式:flags的应用 这里主要介绍一下re.compile(pattern[, flags ...

  5. 几个页面loading样式

    随手练习了几个loading样式,以后看到有意思的loading样式也会补充上.样式的兼容性建议还是去w3c上看下属性的兼容性,至少我习惯这么多,当然,w3c中文网貌似很久很久没更新过了,可能更好的还 ...

  6. ImageView最大高度和宽度失效解决方案

    解决方案 做RecyclerView的 item 布局时,用到imageview ,可是图片按原始尺寸显示,不规范. 所以去google了一下imageview的宽高限制,就试了下maxheight/ ...

  7. 一天搞定HTML----标签类型与类型转换05

    标签类型: 标签只有两类:行内元素和块元素 行内元素:内容撑开宽高 块元素:默认独占一行 注意: 在使用display时,会遇到一种inline-block类型的标签.这种标签不属于标签的分类. 1. ...

  8. javaSE_08Java中static、继承、重写-思维导图

    思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 : 2)右击在新标签中打开放大查看 (IE不支持,搜狗,360可以):

  9. 初学JVM

    最近在读周志明的<深入理解Java虚拟机:JVM高级特性与最佳实践>,从中学到了很多,有些人可能会问为什么我们要学习JVM,他有什么用?在这里我想说一下,并不是这本书是大家都推荐的说有用处 ...

  10. selenium+python浏览器窗口的切换

    1.首先需要知道当前浏览器中有多少个活动的窗口 >>> br.window_handles[u'{075a54ee-3d10-4c76-b56d-b645259bbd54}', u' ...