zoukankan html css js c++ java

CSS 竖线点时间节点

效果如图

<!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>

查看全文

相关阅读:
排序算法：冒泡排序
 排序算法：插入排序
 排序算法：折半插入排序
 排序算法：快速排序
 浅谈C/C++回调函数（Callback）& 函数指针
 仿函数
 回溯法：求和
 动态规划：数字和为sum的方法数
 字典序
 剑指offer15 二进制中1的个数

原文地址：https://www.cnblogs.com/thinkingthigh/p/7570959.html

CSS 竖线 点 时间节点

CSS 竖线点时间节点