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>

查看全文

相关阅读:
Gym
[APIO2014] 回文串
 python选课系统
 python面向对象之类成员修饰符
 python面向对象之类成员
 python的shelve模块
 python的re模块
 python的configparser模块
 python的sys和os模块
 python的hashlib模块

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

CSS 竖线 点 时间节点

CSS 竖线点时间节点