效果如图

<!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. 3dContactPointAnnotationTool开发日志（十三）

      为了使生成的项目能够显示报错信息我又勾选了下面这几个选项:   然后生成的项目运行时可以显示错误信息了,貌似是shader是空的.   之前的代码是这么写的,调用了Shader.Find(),貌似 ...

  2. lol人物模型提取（二）

      两个dds文件怎么导入到一个模型上呢?这模型又不能拆开.   一开始我想的是用两个材质球来完成,一个材质球对应一个dds文件,然而行不通.   一个材质球对应两个dds文件还不太会弄,于是我想着干 ...

  3. shell基础练习题讲解

    1037774765 克隆 1.创建一个用户redhat,其ID号为1001,基本组为like(组ID为2002),附近租为linux. groupadd -g 2002 likegroupadd l ...

  4. solr 学习之solrJ

    solrJ是访问Solr服务的JAVA客户端,提供索引和搜索的请求方法,SolrJ通常嵌入在业务系统中,通过solrJ的API接口操作Solr服务. <!-- https://mvnreposi ...

  5. BZOJ 1103 大都市(dfs序+树状数组)

    应该是一道很水的题吧... 显然可以用树链剖分解决这个问题,虽然不知道多一个log会不会T.但是由于问题的特殊性. 每次修改都是将边权为1的边修改为0,且询问的是点i到根节点的路径长度. 令点i到根节 ...

  6. BZOJ 1149 风铃(树形DP)

    题目描述的实际是一颗二叉树,对于每个结点,要么满叉,要么无叉. 对于一种无解的简单情况,我们搜一遍树找到最浅的叶子结点1和最深的叶子结点2,如果dep[1]<dep[2]-1,则显然无解. 所以 ...

  7. BZOJ3167/BZOJ4824 HEOI2013SAO/CQOI2017老C的键盘（树形dp）

    前者是后者各方面的强化版. 容易想到设f[i][j]表示i子树中第j小的是i的方案数(即只考虑相对关系).比较麻烦的在于转移.考虑逐个合并子树.容易想到枚举根原来的排名和子树根原来的排名,算一发组合数 ...

  8. [NOIP2015 TG D2T3]运输计划

    题目大意: 给你一棵n个节点的树,有边权,有多个任务,每个要求从ui号节点到 vi号节点去.m 个计划, 这 m 个计划会同时开始.当这 m 个任务都完成时,工作完成. 现在可以把任意一个边的边权变为 ...

  9. 【POJ3621】【洛谷2868】Sightseeing Cows（分数规划）

    [POJ3621][洛谷2868]Sightseeing Cows(分数规划) 题面 Vjudge 洛谷 大意: 在有向图图中选出一个环,使得这个环的点权\(/\)边权最大 题解 分数规划 二分答案之 ...

  10. 洛谷4577 & LOJ2521：[FJOI2018]领导集团问题——题解

    https://www.luogu.org/problemnew/show/P4577 https://loj.ac/problem/2521 参考:https://www.luogu.org/blo ...