时间轴
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.content-wrap .event-tree .tree-wrap {
margin: 50px 0 100px 0;
}
.content-wrap .event-tree .tree-wrap .text-wrap {
position: relative;
}
.content-wrap .event-tree .tree-wrap .text-wrap .date {
color: #4074e1;
font-size: 13px;
margin-bottom: 5px;
line-height: normal;
}
.content-wrap .event-tree .tree-wrap .text-wrap .year {
font-size: 14px;
}
.content-wrap .event-tree .tree-wrap .text-wrap .event {
font-size: 14px;
line-height: normal;
}
.content-wrap .event-tree .node-left {
position: relative;
text-align: right;
padding-right: 50%;
overflow: hidden;
margin-top: -48px;
}
.content-wrap .event-tree .node-left .leaf-group {
float: right;
margin-left: 68px;
margin-right: -1px;
}
.content-wrap .event-tree .node-left .leaf-group:before {
left: 50%;
margin-left: -50px;
}
.content-wrap .event-tree .node-left .leaf-group:after {
left: 50%;
margin-left: -42px;
}
.content-wrap .event-tree .node-left .leaf {
border: 2px solid #4074e1;
left: 50%;
margin-left: -14px;
}
.content-wrap .event-tree .node-left.last .leaf-group {
background-color: #ffffff;
}
.content-wrap .event-tree .node-right {
position: relative;
text-align: left;
padding-left: 50%;
overflow: hidden;
margin-top: -48px;
}
.content-wrap .event-tree .node-right .leaf-group {
float: left;
margin-right: 68px;
margin-left: -1px;
}
.content-wrap .event-tree .node-right .leaf-group:before {
right: 50%;
margin-right: -50px;
}
.content-wrap .event-tree .node-right .leaf-group:after {
right: 50%;
margin-right: -42px;
}
.content-wrap .event-tree .node-right .leaf {
border: 2px solid #4074e1;
right: 50%;
margin-right: -14px;
}
.content-wrap .event-tree .node-right .leaf:after {
content: '';
display: inline-block;
width: 12px;
height: 12px;
background-color: #4074e1;
border-radius: 50%;
margin-left: 6px;
margin-top: 6px;
}
.content-wrap .event-tree .node-right.last .leaf-group {
background-color: #ffffff;
}
.content-wrap .event-tree .leaf-group {
display: inline-block;
height: 75px;
width: 2px;
background-color: #4074e1;
margin-top: 48px;
}
.content-wrap .event-tree .leaf-group:before {
position: absolute;
content: '';
display: inline-block;
width: 10px;
height: 10px;
background-color: #4074e1;
border-radius: 50%;
top: 30px;
}
.content-wrap .event-tree .leaf-group:after {
position: absolute;
content: '';
display: inline-block;
width: 30px;
height: 2px;
background-color: #4074e1;
top: 34px;
}
.content-wrap .event-tree .leaf {
position: absolute;
display: inline-block;
width: 25px;
height: 25px;
border-radius: 50%;
background-color: #ffffff;
top: 20px;
}
</style>
<div class="content-wrap">
<h2>企小助大事记</h2>
<div class="event-tree">
<div class="tree-wrap">
<div class="node-left">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2012</span>
年12月-<span class="year">2015</span>年3月
</p>
<p class="event">企小助项目筹备&推广</p>
</div>
</div>
<div class="node-right">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2014</span>
年4月
</p>
<p class="event"> 企小助正式上线</p>
</div>
</div>
<div class="node-left">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2014</span>
年5月
</p>
<p class="event">与国内多家数据中心合作</p>
</div>
</div>
<div class="node-right">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2014</span>
年8月
</p>
<p class="event">云主机UHost、数据库UDB通过工信部可信云认证</p>
</div>
</div>
<div class="node-left">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2014</span>
年11月
</p>
<p class="event">
获ChinaBang Awards2014年度最佳云服务奖
</p>
</div>
</div>
<div class="node-right">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2015</span>
年4月
</p>
<p class="event">
企业移动套件上线运营
</p>
</div>
</div>
<div class="node-left">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2015</span>
年7月
</p>
<p class="event">混合云及私有云获2015年度GITC互联网最佳技术创新奖</p>
</div>
</div>
<div class="node-right">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2016</span>
年5月
</p>
<p class="event">推出企云3.1和企云3.1 Update</p>
</div>
</div>
<div class="node-left">
<div class="leaf-group">
<span class="leaf"></span>
</div>
<div class="text-wrap">
<p class="date">
<span class="year">2016</span>
年10月
</p>
<p class="event">
企小助方案进行全面改进
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
浙公网安备 33010602011771号