效果如图

<!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. WebKit 源码分析 -- loader

    原文地址: http://peirenlei.iteye.com/blog/1718569 摘要:本文介绍 WebCore 中 Loader 模块是如何加载资源的,分主资源和派生资源分析 loader ...

  2. web传参

    页面通过对象,将表单数据传送给后端,后端通过对象接收参数值,

  3. 【bzoj2588】Spoj 10628. Count on a tree 离散化+主席树

    题目描述 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个询问的答案,初始为0,即第一个 ...

  4. 前端基础：JavaScript介绍

    JavaScript介绍 一.JavaScript简介 1.在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现二层,因为Netscape与Sun合作,N ...

  5. sqlserver修改sa密码（在windows登陆没有权限的情况下）

    对于windows用户没有权限执行alter login sa enable的情况下,采用如下方法可以成功修改sa密码登陆. . 用Run as a administrator打开命令提示符里输入NE ...

  6. BZOJ4873 Shoi2017寿司餐厅（最小割）

    选择了某个区间就必须选择其所有子区间,容易想到这是一个最大权闭合子图的模型.考虑将区间按长度分层,相邻层按包含关系连边,区间[i,j]的权值即di,j,其中最后一层表示长度为1的区间的同时也表示寿司本 ...

  7. Greenlet-手动切换

    yield()是自己写的协程,Greenlet( )是已经封装好了的协程. 协程:遇到 I/O 操作就切换到别的地方了(先去处理其他携程去了).等原协程的 I/O 操作一完成就切回去.这样就把 I/O ...

  8. [洛谷P4139]上帝与集合的正确用法

    题目大意:多次询问,每次给你$p$询问$2^{2^{2^{\dots}}}\bmod p$ 题解:扩展欧拉定理,求出$\varphi(p)$即可.因为$2^{2^{2^{\dots}}}>> ...

  9. bzoj3157: 国王奇遇记

    emmm...... 直接看题解好了: BZOJ-3157. 国王奇遇记 – Miskcoo's Space O(m)不懂扔掉 总之,给我们另一个处理复杂求和的方法: 找到函数之间的递推公式! 这里用 ...

  10. [NOI2017]蔬菜——时光倒流+贪心

    题目链接 题解: 貌似一眼看过去是一个贪心. 其他的算法要记录的东西就太多了. 部分分其实很高.但是没有什么提示. 想一些套路:二分?不行还要贪心判断. 分治?前后取法是有影响的. 时光倒流? 也许可 ...