一个简单的时间轴demo
一个时间轴的组成
- 使用一个块级元素包裹内容,并未块级元素设置边框
- 定义圆形或者菱形等元素标签,子元素设置偏移或者定位元素将图标定位到边框上
- 使其中的内容不溢出,自动换行,内容自动撑高
英文自动换行: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的更多相关文章
- 一个简单的webservice的demo(下)winform异步调用webservice
绕了一大圈,又开始接触winform的项目来了,虽然很小吧.写一个winform的异步调用webservice的demo,还是简单的. 一个简单的Webservice的demo,简单模拟服务 一个简单 ...
- 一个简单的Webservice的demo(中)_前端页面调用
首先新建项目,这里有两种调用方式,为了能方便理解,新建页面WebserviceTest如下图: 先引用写好的服务,这里用上次写好的服务.见上次写的一个简单的Webservice的demo,简单模拟服务 ...
- 一个简单的Webservice的demo,简单模拟服务
前段时间一直在学习WCF,匆匆忙忙的把<WCF全面解析>和<WCF服务编程>看了一遍,好多东西都不是很懂,又听了一下WCF分布式开发的网络教程,算是马马虎虎的明白点了.回顾了一 ...
- 用vue实现一个简单的时间屏幕
前言 去年用了一个小的 app,叫做 一个木函,本来想着用来做动画优化就删掉了的,不过看到他有个时间屏幕的小工具,就点进去看了下,觉得挺好玩的,就想着能不能自己实现一下. ps: 闲话不多说,先上例子 ...
- 用idea搭建一个简单的SSM的Demo
1.新建一个maven web app项目 结构如下 resources的资源文件如下 applicationContext.xml 的配置 <?xml version="1.0&q ...
- 一个简单的servlet的demo
javaweb 的应用我们需要参考javaee api 查找servlet接口 javax.servletInterface Servlet All Known Subinterfaces: Ht ...
- 一个简单的Socket通信Demo
服务器端Demo: Server.java(服务器端运行主程序,直接运行): package cn.wjs; import java.net.InetAddress; import java.net. ...
- 一个简单的使用restc demo
最近不经意间看到饿了么团队开发的restc,接口调试工具(类似postman),其实调试接口都没用过工具,每次都只是运行起项目直接调接口.闲来无事,看到restc,就决定试试,后面觉得挺不错的,就分享 ...
- axis2与eclipse的整合:开始一个简单的axis2 的demo
1.下载axis2,现在axis2最新版本是axis2-1.6.2,下载地址:http://axis.apache.org/axis2/java/core/download.cgi 2.下载好的zip ...
随机推荐
- [python] 1、python鼠标点击、移动事件应用——写一个自动下载百度音乐的程序
1.问题描述: 最近百度总爱做一些破坏用户信任度的事——文库金币变券.网盘限速,吓得我赶紧想办法把存在百度云音乐中的歌曲下载到本地. http://yinyueyun.baidu.com/ 可问题是云 ...
- mac下sublime text3 安装px转rem插件
本人使用的是os-x系统,即mac系统,每次使用单位rem用其他网页转换很不方便.自己捣腾了一下插件,现在共享给大家 第一步: 先下载插件: https://github.com/narrow-gat ...
- Python之正则表达式(re模块)
本节内容 re模块介绍 使用re模块的步骤 re模块简单应用示例 关于匹配对象的说明 说说正则表达式字符串前的r前缀 re模块综合应用实例 正则表达式(Regluar Expressions)又称规则 ...
- python中defaultdict的用法
初识defaultdict 之前在使用字典的时候, 用的比较随意, 只是简单的使用dict. 然而这样在使用不存在的key的时候发生KeyError这样的一个报错, 这时候就该defaultdict登 ...
- 创建的docker容器时间显示错误/date错误/时区错误
前几天在测试应用的功能时,发现存入数据库中的数据create_time或者update_time字段总是错误,其他数据都是正常的,只有关于时间的字段是错误的. 进入linux服务器中查看,也没有任何的 ...
- APUE-文件和目录(四)文件系统
一个命令 mkfs 讲文件系统前先介绍一个用于创建文件系统的命令: mkfs mkfs [options] [-t type fs-options] device [size] 描述 mkfs用来在设 ...
- ActiveMQ 和消息简介
Apache ActiveMQ 是远程系统间进行通信的消息代理,实现了 JMS(Java Message Service,Java 消息服务).尽管 ActiveMQ 是使用 Java 写的,但是其提 ...
- 【Python3之面向对象的程序设计】
一.面向对象的程序设计的由来 1.第一阶段:面向机器,1940年以前 最早的程序设计都是采用机器语言来编写的,直接使用二进制码来表示机器能够识别和执行的指令和数据. 简单来说,就是直接编写 0 和 1 ...
- JAVAEE学习——struts2_03:OGNL表达式、OGNL与Struts2的结合和练习:客户列表
一.OGNL表达式 1.简介 OGNL:对象视图导航语言. ${user.addr.name} 这种写法就叫对象视图导航. OGNL不仅仅可以视图导航.支持比EL表达式更加丰富的功能. 2.使用OG ...
- Linux上的防病毒软件ClamAV
Clam AntiVirus(ClamAV)是免费而且开放源代码的防毒软件,软件与病毒码的更新皆由社群免费发布.目前ClamAV主要是使用在由Linux.FreeBSD等Unix-like系统架设的邮 ...