一个简单的时间轴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> 

效果预览

完整代码

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏james大数据架构

Android中Button

1.android:drawableTop="@drawable/accept"设置在按钮文本的上面绘制指定图片。可同时指定drawableLeft等其它方向 ...

22880
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:实现手机上常见的ListMenuView

打开集合编辑器,并点击“添加”,ID属性(用于标识菜单组),Items属性(菜单项集合),Title属性(菜单组文本),Value属性(菜单组值),如图1、图2

11640
来自专栏Android开发指南

13.按比例显示图片、自定义属性、测量

387100
来自专栏互联网杂技

关于css

常用的选择器:标签选择器,id选择器,class选择器,伪类选择器。 但是还有一个功能强大的选择器:属性选择器, 属性选择器,这样使用, 1、[属性名]{st...

36270
来自专栏十月梦想

HTML表格

            4.cellspacing:外边距(单元格和单元格之间的距离)

62820
来自专栏.Net移动开发

.NET(C#、VB)移动开发——Smobiler平台控件介绍:TextTabBar控件

获得和设置标签栏单元集合,打开集合编辑器,并点击“添加”,分别填写Text(菜单项文本),Value(内部值,不在界面上显示),如图 7、图 8;

15720
来自专栏前端知识分享

第20天:京东nav、footer部分制作

cursor:pointer; 鼠标变成小手 cursor:default;小白 cursor:move;移动 cursor:text;文本输入

13010
来自专栏云端架构

【云端架构】前端jQuery鼠标事件精选

鼠标事件是指用户在移动鼠标光标或者点击任意鼠标键时触发的事件,jQuery中封装了基本上所有的鼠标事件包括点击,双击,移动等鼠标事件,下面我们就来看下这些事件的...

38360
来自专栏一“技”之长

标签之美五——网页表格的设计 原

1、<table></table>:表格的开始和结束标签,行列的布局都在<table>标签内。

9710
来自专栏达摩兵的技术空间

css常规水平居中&&垂直居中方案

无论水平居中还是垂直居中相信你并不陌生,但有多少种实现方式,每种的优劣以及兼容性相信你并不清楚。

12020

扫码关注云+社区

领取腾讯云代金券