body{
margin: 0;
padding: 0;
}
.main{
width: 50%;
margin: 30px auto;
}
.time-axis{
margin: 0;
padding: 0;
position: relative;
}
.time-axis:before{
content: '';
position: absolute;
left: 93px;
top: 15px;
width: 1px;
height: 100%;
background-color: #E4E4E4;
}
.time-axis-item{
list-style: none;
padding-left: 150px;
position: relative;
line-height: 45px;
font-size: 14px;
color: #141414;
}
.time-axis-achievement{
margin: 0;
}
.time-axis-date{
position: absolute;
left: 0;
top: 0;
color: #666;
}
.time-axis-date span{
position: absolute;
right: -49px;
top: 35%;
display: block;
width: 13px;
height: 13px;
border: 1px solid #ccc;
border-radius: 100%;
background-color: #fff;
}
.time-axis-date span:after{
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 7px;
height: 7px;
margin: auto;
background-color: #ccc;
border: 1px solid #ccc;
border-radius: 100%;
}
.time-axis-item:last-child .time-axis-date span{
border-color: #48BEB2;
}
.time-axis-item:last-child .time-axis-date span:after{
background-color: #48BEB2;
border-color: #48BEB2;
}
<div class="main">
<ul class="time-axis"></ul>
</div>
<script src="../static/libs/jquery/jquery-1.11.2.min.js"></script>
//這是要遍歷時間軸的數據
var dimeAxis=[{
date:'2003.10',
title:'初涉教育行業',
achievement:''
},
{
date:'2010.07',
title:'總公司成立',
achievement:''
},
{
date:'2010.12',
title:'第一套產品《創新大學英語 . 綜合教程》系列教材出版 ',
achievement:'與華東師範大學出版社戰略合作(創新大學英語教學平臺)'
},
{
date:'2012.11',
title:'《創新大學英語》系列教材榮獲“十二五”普通高等教育本科國家級規劃教材',
achievement:''
},
{
date:'2013.06',
title:'與成都理工大戰略合作(共同研發在線學習平臺)',
achievement:'四川創圖合作院校超過100所'
},
{
date:'2013.08',
title:'《創新高職英語》、《創新機電一體化》等系列教材榮獲“十二五”職業教育國家規劃教材',
achievement:''
},
{
date:'2014.12',
title:'成都厚博科技有限公司成立',
achievement:''
},
{
date:'2016.08',
title:'自主研發“站長素材在線”平臺上線',
achievement:''
},
{
date:'2017.05',
title:'“站長素材在線”在合肥工業大學,重師大,雲大等高校應用',
achievement:''
},
{
date:'2017.12',
title:'“站長素材在線”使用人數超過100萬',
achievement:''
},
{
date:'2018.04',
title:'合作院校及企業超過400家',
achievement:''
}];
$(function(){
$.each(dimeAxis,function(i,e){
var html='<li class="time-axis-item">'+
'<div class="time-axis-date">'+e.date+'<span></span></div>'+
'<div class="time-axis-title">'+e.title+'</div>'+
'<p class="time-axis-achievement">'+e.achievement+'</p>'+
'</li>';
$('.time-axis').append(html);
});
});