效果如图

<!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. HDU 2161 Primes

    http://acm.hdu.edu.cn/showproblem.php?pid=2161 Problem Description Write a program to read in a list ...

  2. HASH表的实现（拉链法）

    本文的一些基本概念参考了一部分百度百科,当然只保留了最有价值的部分,代码部分完全是自己实现! 简介 哈希表(Hash table,也叫散列表),是根据关键码值(Key value)而直接进行访问的数据 ...

  3. memcached安装与启动

    windows 安装1.4.4版本 https://pan.baidu.com/s/1xX1NThLqeq2zNMaqONFgkQ 解压,“以管理员身份” 运行cmd,切换到memcached根目录, ...

  4. timer实现

    实现一个 timer 前段时间写过一篇 blog 谈到 用 timer 驱动游戏 的一个想法.当 timer 被大量使用之后,似乎自己实现一个 timer 比用系统提供的要放心一些.最近在重构以前的代 ...

  5. 反向传播算法 Backpropagation Algorithm

    假设我们有一个固定样本集,它包含 个样例.我们可以用批量梯度下降法来求解神经网络.具体来讲,对于单个样例(x,y),其代价函数为:这是一个(二分之一的)方差代价函数.给定一个包含 个样例的数据集,我们 ...

  6. Python 配置日志的几种方式

    Python配置日志的几种方式 作为开发者,我们可以通过以下3种方式来配置logging: (1)使用Python代码显式的创建loggers,handlers和formatters并分别调用它们的配 ...

  7. BZOJ4735 你的生命已如风中残烛（组合数学）

    将每个位置上的数都-1,则显然相当于前缀和始终非负. 然后就是完全想不到的了.考虑往里面加一张-1的牌.假设在一个合法排列的最后添上一个-1,那么在该排列的所有循环同构排列中,满足前m个前缀和都非负的 ...

  8. CentOS 7 环境搭建kafka集群

    Kafka是一个MQ服务,流行的MQ服务器有三个,分别是ActiveMQ,RabbbitMQ和Kafka 目录说明:/home/fuqinqin/packages : 安装包存放目录/home/fuq ...

  9. POJ2826：An Easy Problem?!——题解（配特殊情况图）

    http://poj.org/problem?id=2826 题目大意:给两条线,让它接竖直下的雨,问其能装多少横截面积的雨. ———————————————————————————— 水题,看题目即 ...

  10. 洛谷3934：Nephren Ruq Insania——题解

    https://www.luogu.org/problemnew/show/P3934 题面自己读吧(滑稽. 看到这道题就能够想到BZOJ4869:[SHOI2017]相逢是问候我们曾经用过的哲学扩展 ...