<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>步骤进程</title> <style type="text/css"> *{margin:0; padding:0;} body{background:#fff;} ul{list-style-type:none;} .demo{position:relative;} .demo ul{display:table; width:100%;} .demo li{display:table-cell; vertical-align:top; text-align:center;} .demo .num{width:30px; height:30px; line-height:30px; margin:0 auto; background:#cdcdcd; border-radius:50%;} .demo li:nth-child(2n+1):before{content:''; display:block; margin:15px 10px; border-top:#cdcdcd 1px solid;} .demo li:nth-child(2n){width:1%; white-space:nowrap;} .demo li:first-child{display:none;} .demo li.on:before{border-color:#f60;} .demo li.on + li .num{background:#f60; color:#fff;} </style> </head> <body> <div class="demo"> <ul> <li class="on"></li> <li> <div class="num">1</div> <div class="text">实名认证</div> </li> <li class="on"></li> <li> <div class="num">2</div> <div class="text">实名认证</div> </li> <li></li> <li> <div class="num">3</div> <div class="text">实名认证</div> </li> <li></li> <li> <div class="num">4</div> <div class="text">实名认证</div> </li> </ul> </div> </body> </html> 提示：你可以先修改部分代码再运行。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>步骤进程</title> <style type="text/css"> *{margin:0; padding:0;} body{background:#fff;} ul{list-style-type:none;} .demo{position:relative;} .demo ul{display:flex; width:100%;} .demo li{text-align:center;} .demo .num{width:30px; height:30px; line-height:30px; margin:0 auto; background:#cdcdcd; border-radius:50%;} .demo li:nth-child(2n+1){flex:1; margin:15px 10px; border-top:#ddd 1px solid;} .demo li:first-child{display:none;} .demo li.on{border-color:#f60;} .demo li.on + li .num{background:#f60; color:#fff;} </style> </head> <body> <div class="demo"> <ul> <li class="on"></li> <li> <div class="num">1</div> <div class="text">实名认证</div> </li> <li class="on"></li> <li> <div class="num">2</div> <div class="text">实名认证</div> </li> <li></li> <li> <div class="num">3</div> <div class="text">实名认证</div> </li> <li></li> <li> <div class="num">4</div> <div class="text">实名认证</div> </li> </ul> </div> </body> </html> 提示：你可以先修改部分代码再运行。 by:上海-逆天人物 转载请注明：有爱前端 » 步骤进程 喜欢 (0)or分享 (0)
