样子如下图所示：
上代码
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> </head> <body> <style> .timeline-list{ margin: 0; font-size: 14px; list-style: none; } .timeline-item:last-child .timeline-item_tail { display: none; } .timeline-item{ position: relative; padding-bottom: 20px; } .timeline-item_tail{ position: absolute; left: 4px; height: 100%; border-left: 2px solid #e4e7ed; } .timeline-item_node{ position: absolute; background-color: #e4e7ed; border-radius: 50%; display: flex; justify-content: center; align-items: center; left: -2px; width: 9px; height: 9px; background: #fff; border:3px solid #2395FF } .timeline-item_wrapper{ position: relative; padding-left: 20px; top: 0px; } .timeline-item_timestamp{ margin-bottom: 8px; padding-top: 0px; color: #242424; line-height: 1; font-weight: 700; font-size: 13px; } .delclass{ color: #0379FB; font-weight: normal; cursor: pointer; } .delclass:hover{ color: #2395FF; } .tbox{ padding:10px; } .tbox-content{ background:rgba(246,246,246,1); padding: 10px; width: 600px; height: 90px; } .pannel{ border-radius: 4px; border: 1px solid #ebeef5; background-color: #fff; overflow: hidden; color: #303133; transition: .3s; } .pannel-header{ padding: 20px; } .pannel-body{ padding: 20px; } .pannel.shadow{ box-shadow: 0 2px 12px 0 rgba(0,0,0,.1); } .config{ background:rgba(252,252,252,1); padding: 20px; margin-bottom: 15px; position: relative; } .delItem{ position: absolute; font-size: 17px; color: #333; top: -8px; right: -5px; cursor: pointer; } .config-content{ margin-top: 15px; } .imgLabel{ width: 80px; color: #999; } .imgList{ margin-left: 80px; padding: 10px; background: rgba(246,246,246,1); } </style> <ul class="timeline-list"> <li class="timeline-item"> <div class="timeline-item_tail"></div> <div class="timeline-item_node"></div> <div class="timeline-item_wrapper"> <div class="timeline-item_timestamp"> 工程管理部 </div> <div class="timeline-item_content"> <div class="tbox"> <div class="tbox-title"> <span class="index">1、</span> <span class="text">施工计划A区1-4层混凝土，完成30%。</span> </div> <div class="tbox-content"> </div> </div> <div class="tbox"> <div class="tbox-title"> <span class="index">2、</span> <span class="text">施工计划A区1-4层混凝土，完成30%。</span> </div> <div class="tbox-content"> </div> </div> </div> </div> </li> <li class="timeline-item"> <div class="timeline-item_tail"></div> <div class="timeline-item_node"></div> <div class="timeline-item_wrapper"> <div class="timeline-item_timestamp"> 工程管理部 </div> <div class="timeline-item_content"> <div class="tbox"> <div class="tbox-title"> <span class="index">1、</span> <span class="text">施工计划A区1-4层混凝土，完成30%。</span> </div> <div class="tbox-content"> </div> </div> <div class="tbox"> <div class="tbox-title"> <span class="index">2、</span> <span class="text">施工计划A区1-4层混凝土，完成30%。</span> </div> <div class="tbox-content"> </div> </div> </div> </div> </li> <li class="timeline-item"> <div class="timeline-item_tail"></div> <div class="timeline-item_node"></div> <div class="timeline-item_wrapper"> <div class="timeline-item_timestamp"> 工程管理部 </div> <div class="timeline-item_content"> <div class="tbox"> <div class="tbox-title"> <span class="index">1、</span> <span class="text">施工计划A区1-4层混凝土，完成30%。</span> </div> <div class="tbox-content"> </div> </div> <div class="tbox"> <div class="tbox-title"> <span class="index">2、</span> <span class="text">施工计划A区1-4层混凝土，完成30%。</span> </div> <div class="tbox-content"> </div> </div> </div> </div> </li> </ul> <script> </script> </body> </html>
