body{ margin: 0; padding: 0; } .main{ 50%; margin: 30px auto; } .time-axis{ margin: 0; padding: 0; position: relative; } .time-axis:before{ content: ''; position: absolute; left: 93px; top: 15px; 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; 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; 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); }); });