效果如图

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>竖线点时间节点</title>

</head>

<style>

.vertical-line {

height: 100px;

border-left: 2px solid;

margin-left: 4px;

border-image: -webkit-linear-gradient( #00eba7 , #08b8e6) 30 30;

border-image: -moz-linear-gradient( #00eba7 , #08b8e6) 30 30;

border-image: linear-gradient( #00eba7 , #08b8e6) 30 30;

}

.vertical-circle {

    float: left;

    width: 6px;

    height: 6px;

    border:2px solid white;

    background-color: #08b8e6;

    -webkit-border-radius: 100px;

}

.vertical-text{

    float:left;margin-top:-7px;

}

</style>

<body>

<div>

<div class="vertical-circle"></div><div class="vertical-text">2017.03.23 内容内容内容内容内容内容</div>

<div class="vertical-line"></div>

<div class="vertical-circle"></div><div class="vertical-text">2017.03.24 内容内容内容内容内容内容</div>

<div class="vertical-line"></div>

<div class="vertical-circle"></div><div class="vertical-text">2017.03.25 内容内容内容内容内容内容</div>

<div class="vertical-line"></div>

<div class="vertical-circle"></div><div class="vertical-text">2017.03.26 内容内容内容内容内容内容</div>

</div>

</div>

</body>

</html>

CSS 竖线 点 时间节点的更多相关文章

  1. 纯css+js水平时间轴

    自定义,并自动加载时间节点 当前时间节点居中,突出显示 时间动态无痕添加 效果图: 初始状态 时间左走到一定2016.1月后 html: <!-- 水平时间轴 --> <div id ...

  2. PUSU 拆分后发货和开票的时间节点问题

    项目做到现在业务突然说流程要变,心中顿时无数个草草草掠过.这公司业务也真是够奇葩了,一天一个样.原来流程是由PU把产品生产完后就发给SU,由SU再来决定什么时候对客户和开票.而现在马上要上线了,突然冒 ...

  3. Python - 记录我开始学习Python的时间节点

    记录我开始学习Python的时间节点 2019-09-22 从明天开始我要开始学习Python了,坚持学习.坚持写博客,慢慢积累. 结合实例项目,最好能把目前在做的项目用Python实现. 加油!

  4. css禁止双击dom节点被选中user-select:none

    css禁止dom节点被选中:  当某个dom节点在快速重复点击的时候出现这个节点被选中,有时候其实并不希望出现这种情况,比如我们使用一个span或者a标签做为按钮dom元素的时候,快速双击这个按钮,就 ...

  5. 怎样通过CSS选择器获取元素节点或元素节点集合

    使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可. // 标签选择器 document.quer ...

  6. 获取两个时间节点的月份列表&&每个月份的开始时间及结束时间

    //Q:从今天起之前五个月的列表 date_default_timezone_set('PRC'); $time=strtotime('-5 month'); //包含本月 $begin = strt ...

  7. css之幽灵空白节点

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. oralce的function处理考勤时间节点以及计算工作时间

    例如: 上班时间为 8:30 到17:30,加班则到21:00:午休时间为1小时,(12:00-13:00): 晚间休息时间为半小时 (17:30-18:00),计算一批考勤数据的上班时间. 思路: ...

  9. [HTML/CSS]有一种节点叫做文本节点

    HTML可以看成是由节点(node)组成的树结构 我们一般都是在<p>节点里面写字符串. 在上图中,<p>节点和字符串之间有一个text, 这个text就是文本节点. 我们可以 ...

随机推荐

  1. 【week2】燃尽图

    燃尽图(burn down chart)是在项目完成之前,对需要完成的工作的一种可视化表示.燃尽图有一个Y轴(工作)和X轴(时间).理想情况下,该图表是一个向下的曲线,随着剩余工作的完成,“烧尽”至零 ...

  2. 关闭win7/Server 2008非正常关机启动自动修复功能

    命令提示符下输入 bcdedit /set {default} bootstatuspolicy ignoreallfailures bcdedit /set {current} recoveryen ...

  3. new关键字 、this关键字、base关键字

    使用new,所做的三件事: 1. (类是引用对象,引用对象是在堆中开辟空间)在堆中开辟空间 2. 在开辟的堆空间中创建对象 3. 调用对象的构建函数 4. 隐藏父类成员:子类的成员可以与隐藏从父类继承 ...

  4. Java ArrayList Vector LinkedList Stack Hashtable等的差别与用法（转）

    ArrayList 和Vector是采取数组体式格式存储数据,此数组元素数大于实际存储的数据以便增长和插入元素,都容许直接序号索引元素,然则插入数据要设计到数组元素移动等内存操纵,所以索引数据快插入数 ...

  5. 不能将多个项传入“Microsoft.Build.Framework.ITaskItem”类型的参数

    项目编译报错: ”对于“GenerateApplicationManifest”任务的“InputManifest”参数是无效值.不能将多个项传入“Microsoft.Build.Framework. ...

  6. 【python】 requirements使用方法

    记得导入导出包的时候要想激活虚拟环境.1.导出requirements方法pip freeze > requirements.txt 2.安装requirements方法pip install ...

  7. jsp当做第二个servlet request的生命周期 请求 响应 不管中间经历多少个servlet 只要最后一个serlvt执行后 则生命周期结束 request的域消失

    jsp当做第二个servlet  request的生命周期   请求 响应  不管中间经历多少个servlet 只要最后一个serlvt执行后 则生命周期结束  request的域消失

  8. 【题解】洛谷P4735最大异或和

    学习了一下可持久化trie的有关姿势~其实还挺好理解的,代码也短小精悍.重点在于查询某个历史版本的trie树上的某条边是否存在,同样我们转化到维护前缀和来实现.同可持久化线段树一样,我们为了节省空间继 ...

  9. 【题解】51nod 1672区间交

    二分答案 + two - pointer + 树状数组大法好ヽ(ﾟ∀ﾟ)ﾒ(ﾟ∀ﾟ)ﾉ 我们可以直接二分一个答案,然后检验 是否存在一个值大于等于这个二分的答案的,且覆盖次数大于等于 \(k\) 的区 ...

  10. [BZOJ5303] [HAOI2018] 反色游戏

    题目链接 LOJ:https://loj.ac/problem/2524 BZOJ:https://lydsy.com/JudgeOnline/problem.php?id=5303 洛谷:https ...