<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="index.css"> </head> <style type="text/css"> * { box-sizing: border-box; } .wrapper { font-family: roboto; display: flex; flex-wrap: wrap; max-width: 200px; margin: 0 auto; } .box-area { display: flex; flex-wrap: nowrap; justify-content: center; width: 100%; } .box-date { display: flex; /* 渐变线 */ background: linear-gradient(to right, #fff 40%, #caf1d1 50%, #fff 40%); order: 2; text-align: center; font-size: 12px; flex-basis: 50px; color: #fff; } .box-date>span { font-size: 12px; padding: 5px 10px; margin: auto; background: #4fd166; border-radius:25px; margin-top: 25px; margin-left: 5px; } .box-text { text-align: center; padding: 20px; border-radius: 25px; color: #000; order: 3; width: 80%; padding-left: 10px; background: #fff; margin-bottom: 3%; } .box-text h2 { margin: 0 auto; font-size: 16px; text-transform: uppercase; background-color: #4fd166; padding:10px; text-align: left; } .box-text p { margin: 0 auto; font-size: 14px; text-transform: uppercase; text-align: left; padding: 10px; } @media(min-640px) { .box-text { width: 100%; } .box-right .box-text { order: 1; padding-right: 10px; border-radius: 25px; } .box-right { order: 3; } } .trace { width:200px; height:60px; margin: 0 auto; font-size:26px; color:#008518; background: url(../test/img/right.png) no-repeat right #caf3d2; } </style> <body> <div class="trace" id="apply">审批单</div> <div class="wrapper" id="wrapper1"> <div class="box-area"> <div class="box-date"> <span>1</span> </div> <div class="box-text"> <h2>李某某 2020-03-29 录入申请单</h2> <p></p> </div> </div> </div> </body> </html>
效果：
时间线实现方式二：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> .modalTitle { width: 200px; height: 60px; text-align: center; padding-top: 14px; border-bottom: 1px solid #eee; background-color: #f6fbfc; font-size: 22px; color: #333333; margin-bottom: 30px; } .spul { margin-left: 15px; font-size: 16px; color: #333333; } .spul li { margin-bottom: 15px; } .spul li label { margin-right: 15px; } .cirline{ border-right: 2px solid #4fd166; height: 108px; float: left; left: 13.6px; top: 10px; position: relative; } .spcircle { width: 25px; height: 25px; border-radius: 100%; display: inline-block; position: relative; top: 6px; margin-right: 10px; } .circlegreen { background-color: #4fd166; } .circleyello { background-color: #fad520; } .circlered { background-color: #f13a30; } </style> </head> <body> <div> <div class="modalTitle">过程流</div> <div style="overflow-y: auto; margin-top: 20px; margin-bottom: 30px; height: 210px; border-bottom: 1px solid #eee;"> <ul class="spul" style="list-style: none;"> <div class="cirline"></div> <li><span class="spcircle circlegreen"></span> <label>李某</label> <label>2020-05-20</label> <label>录入</label></li> <li><span class="spcircle circlegreen"></span> <label>李某</label> <label>2020-05-20</label> <label>录入</label></li> <li><span class="spcircle circlered"></span> <label>李某</label> <label>2020-05-30</label> <label>录入</label></li> </ul> </div> </div> </body> </html>
效果：
