问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css+html 做步骤条

头像
汪
    352367

    image.png

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

    前端csshtml5htmlcss3
    阅读 2.9k
    1 个回答
    得票最新
    头像
    _usw
      3.8k2618
      ✓ 已被采纳
      <!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>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题