一个简单的时间轴demo

一个时间轴的组成

  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> 

效果预览

完整代码

转载于:https://www.cnblogs.com/morang/p/7194071.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416380.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

OC发送短信

- (IBAction)sendMessage1:(id)sender {UIAlertView *alert [[UIAlertView alloc]initWithTitle:"短信编辑"message:nil delegate:self cancelButtonTitle:"确定" otherButtonTitles:"取消", nil];alert.tag 1;alert.alertViewStyle UIAlertV…

java获取keyvault_ARM Template 结合key vault存储机密信息 (一)

前两篇讲到了terraform&#xff0c;作为跨平台的IAC工具绝对是没话说的&#xff0c;很非常好用&#xff0c;今天再讲回Azure原生的ARM Template&#xff0c;ARM Template好处就是作为微软的亲儿子&#xff0c;兼容性啥的绝对没话说&#xff0c;但是JSON对于非开发者来说实在用着…

从多级延迟触发器到边沿检测

本文记录一下关于延迟触发器链与它的常用用法&#xff08;即边沿检测。多级延迟的触发器应该是比较常用的&#xff0c;当我们需要对信号信号进行延时&#xff0c;这个时候我们就用到了延迟触发器链。下面就来记录一下吧。 一、多级延迟触发器&#xff08;或延迟触发器链&#x…

java amr 转mp3 报错_amr 转 MP3 报错it.sauronsoftware.jave.InputFormatException问

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼import it.sauronsoftware.jave.AudioAttributes;import it.sauronsoftware.jave.Encoder;import it.sauronsoftware.jave.EncoderException;import it.sauronsoftware.jave.EncodingAttributes;import it.sauronsoftware.jave.Inp…

正则表达式验证各种类型的数字

验证数字的正则表达式集 验证数字&#xff1a;^[0-9]*$ 验证n位的数字&#xff1a;^\d{n}$ 验证至少n位数字&#xff1a;^\d{n,}$ 验证m-n位的数字&#xff1a;^\d{m,n}$ 验证零和非零开头的数字&#xff1a;^(0|[1-9][0-9]*)$ 验证有两位小数的正实数&#xff1a;^[0-9](.[0-9…

mysql 触发器 for each row 理解_“for each row”如何在mysql中的触发器中工作?

FOR EACH ROW表示每个匹配行的更新或删除.除非查询中有where条件,否则触发器主体不会遍历整个表数据.下面演示了一个工作示例&#xff1a;创建样本表&#xff1a;drop table if exists tbl_so_q23374151;create table tbl_so_q23374151 ( i int, v varchar(10) );-- set test d…

iOS 11: CORE ML—浅析

本文来自于腾讯Bugly公众号&#xff08;weixinBugly&#xff09;&#xff0c;未经作者同意&#xff0c;请勿转载&#xff0c;原文地址&#xff1a;https://mp.weixin.qq.com/s/OWD5UEiVu5JpYArcd2H9ig 作者&#xff1a;liujizhou 导语&#xff1a;在刚刚过去的WWDC上&#xff0…

mysql定义shell变量_shell 变量的定义,赋值,运算

一、变量类型1.1、自定义变量1.定义变量不能使用纯数字命名&#xff0c;不能使用横杠命名变量名变量值[rootlocalhost ~]# nameerha2.引用变量$变量名 或者 ${变量量名}3.查看变量值echo$变量量名[rootlocalhost ~]# echo $nameerha4.取消变量[rootlocalhost ~]# unset name[ro…

angular的uiRouter服务学习(5) --- $state.includes()方法

$state.includes 方法用于判断当前激活状态是否是指定的状态或者是指定状态的子状态. $state.includes(stateOrName,params,options) $state.includes方法接受三个参数,其中第二和第三个都不知道是干啥的...估计也不太用得到,就暂时不管了... stateOrName:字符串(必填). 是一个…

前端学习(2487):在VUE中使用element-ui的el-select组件时出现该报错

一. 报错场景 在VUE中使用element-ui的el-select组件时出现该报错 [Vue warn]: Missing required prop: "value" 1 二. 报错原因 2.1.el-select中没有进行双向数据绑定&#xff08;v-model&#xff09; 2.2 el-option没有进行value赋值 三. 具体示例 3.1 报错…

php 正则mysql语句_MySQL正则表达式搜索 - mysql数据库栏目 - 自学php

products表如下&#xff1a;1. 基本字符匹配vcrH1NrV7j2wdDL0cv3o6zWu9KqcHJvZF9uYW1l1tCw/LqswcvLcvRy/e1xNfWt/uzb/J0tTBy6OstvhMSUtFyOe57K708PNqMXkt/ujrMTHw7TSqsfzcHJvZF9uYW1l0vL0cv3tcTX1rf70qrN6sirxqXF5KO60rKzcrHy7XPwsPmtcTA/dfTo6zQ6NKqyrnTwyBMSUtFIA"JetPa…

皇室战争

题目大意: 初始有E点体力值,每天可以开宝箱消耗k体力值,体力值要保证>0 每次开宝箱可获得k*a[i]的愉悦度 求最大愉悦度 样例输入115 2 22 1样例输出112样例1解释第一天用5体力, 接下来回复2点体力, 用光。限制与约定数据编号 cas N E 时间限制(S)0 10 10 10 11 100 100 100 …

python 类和对象 有必要学吗_类与对象-python学习19

类与对象类&#xff1a;我们常用类来划分一个个特定的群体&#xff1b;我们所说的类&#xff0c;是物以类聚的类&#xff0c;是分门别类的类&#xff0c;是多个类似事物组成的群体的统称。类的概念能帮助我们快速理解和判断事物的性质。类(class)&#xff0c;比如整数、字符串、…

codevs 2822 爱在心中

时间限制: 1 s空间限制: 128000 KB题目等级 : 钻石 Diamond题目描述 Description“每个人都拥有一个梦&#xff0c;即使彼此不相同&#xff0c;能够与你分享&#xff0c;无论失败成功都会感动。爱因为在心中&#xff0c;平凡而不平庸&#xff0c;世界就像迷宫&#xff0c;却又让…