纯css、html如何做这样的步骤条样式??
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .step { display: flex; align-items: center; justify-content: center; flex-direction: column; } .step .step-number { width: 25px; height: 25px; border-radius: 50%; background: grey; text-align: center; line-height: 25px; } .step .step-number.active, .step .step-gap.active { background: yellow; } .step .step-gap { width: 5px; height: 25px; background: grey; } </style> </head> <body> <div class="step"> <span class="step-number active">1</span> <span class="step-gap active"></span> <span class="step-number active">2</span> <span class="step-gap"></span> <span class="step-number">3</span> <span class="step-gap"></span> <span class="step-number">4</span> <span class="step-gap"></span> <span class="step-number">5</span> </div> </body> </html>
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
暂无简介
文章 0 评论 0
接受
发布评论
评论(1)