一个时间轴的组成

  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. Python教程(2.2)——数据类型与变量

    和C/C++.Java一样,Python也有数据类型和变量两个概念. 数据类型 Python中的几个基本数据类型为整数(integer/int).浮点数(float/float).布尔值(boolea ...

  2. OpenGL教程(0)——介绍

    OpenGL介绍 OpenGL,全称Open Graphics Library,是一个用C语言写的图形API.通俗地说,OpenGL用来绘制2D/3D图形.目前OpenGL的运用十分广泛,有许多用Op ...

  3. 学习笔记TF018:词向量、维基百科语料库训练词向量模型

    词向量嵌入需要高效率处理大规模文本语料库.word2vec.简单方式,词送入独热编码(one-hot encoding)学习系统,长度为词汇表长度的向量,词语对应位置元素为1,其余元素为0.向量维数很 ...

  4. Qt之新手打包发布程序

    工具:电脑必备.QT下的windeployqt Qt 官方开发环境使用的动态链接库方式,在发布生成的exe程序时,需要复制一大堆 dll,如果自己去复制dll,很可能丢三落四,导致exe在别的电脑里无 ...

  5. Python爬虫Dota排行榜爬取

    1.分析网站 打开开发者工具,我们观察到排行榜的数据并没有在doc里 doc文档 在Javascript里我么可以看到下面代码: ajax的post方法异步请求数据 在 XHR一栏里,我们找到所请求的 ...

  6. .net core中引用webservice,并忽略https证书验证

    1.打开vs, 工具-->扩展和更新 下载这个 2. 在admin下右键,添加-->connected service 选择wsdl文件路径,或者服务的url,比如https://**** ...

  7. Bootstrap & 响应式

    要了解一个东西 就是要知道 它是什么? 干什么 ? 怎么用 ? 1.Bootstrap 简介   Bootstrap 是由Twitter(著名的社交网站)推出的前端开源工具包,它基于Html.CSS. ...

  8. 提高java编程质量 - (二)取余用偶判断,不要用奇判断

    取余判断原则:取余用偶判断,不要用奇判断 先看一个 程序: package com.test; import java.util.Scanner; public class t1 { public s ...

  9. Spring学习(3)---Spring设值注入和构造注入

    (一)设值注入就是指要被注入的类中定义有一个setter()方法,并在参数中定义需要注入的对象.简单的看个例子. 建一个User类: package com.ioc; public class Use ...

  10. VR虚拟现实技术在教育领域的前景展望

    VR虚拟现实技术在教育领域的前景展望 VR虚拟现实技术能迅速火起来,是基于它突破了人们对三维空间在时间与地域上的感知限制,以及市场需求愿景的升级.此技术可广泛地应用到城市规划.室内设计.工业仿真.古迹 ...