css+html 做步骤条

发布于 2022-09-13 01:00:41 字数 94 浏览 21 评论 0

image.png

纯css、html如何做这样的步骤条样式??

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

绝對不後悔。 2022-09-20 01:00:41
<!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>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文