您的位置:首页 > 科技 > IT业 > 2021世界500强企业排名_淮北在建项目_凡科建站靠谱吗_手机金融界网站

2021世界500强企业排名_淮北在建项目_凡科建站靠谱吗_手机金融界网站

2024/10/31 21:10:35 来源:https://blog.csdn.net/weixin_43316300/article/details/140462689  浏览:    关键词:2021世界500强企业排名_淮北在建项目_凡科建站靠谱吗_手机金融界网站
2021世界500强企业排名_淮北在建项目_凡科建站靠谱吗_手机金融界网站

文章目录

  • 前言
  • 一、结果展示
  • 二、操作步骤
    • 2.1、HTML
    • 2.2、CSS
  • 三、感谢

前言

创建一个箭头步骤条通常涉及到使用HTML来定义结构,CSS来定义样式。下面是一个简单的示例,展示了如何使用原生HTML和CSS来制作一个箭头步骤条。


一、结果展示

在这里插入图片描述

二、操作步骤

2.1、HTML

    <div id="step-box"><div class="stepBar1 stepBarOne active-ba"><span class="cirle">1</span><span class="font-sign active-font">阅读须知</span></div><div class="stepBar1 active-ba "><span class="cirle">2</span><span class="font-sign active-font">情景选择</span></div><div class="stepBar1 active-ba"><span class="cirle">3</span><span class="font-sign active-font">表单填写</span></div><div class="stepBar1"><span class="cirle">4</span><span class="font-sign">材料上传</span></div><div class="stepBar1"><span class="cirle">5</span><span class="font-sign">领取方式</span></div><div class="stepBar1"><span class="cirle">6</span><span class="font-sign">申请成功</span></div></div>

2.2、CSS

#step-box  {display: flex;
}
#step-box .cirle {display: inline-block;border-radius: 50%;background: #fff;width: 30px;margin: 5px 18px;height: 30px;color: #0b76c8;line-height: 30px;text-align: center;
}
.stepBar{ width: 164px;height: 40px;background: #e3edf6;position: relative;line-height: 40px;margin: 0px 4px;color: #fff;}
.active-ba{background: #0b76c8;
}
.stepBar::before { content:" ";width: 0;height: 0;border: solid;border-color: transparent transparent transparent #e3edf6;border-top-width: 20px;border-right-width: 20px;border-bottom-width: 20px;border-left-width: 14px;position: absolute;right: -33px;top: 0px;z-index: 1;
}
.active-ba::before{border-color: transparent transparent transparent #0b76c8;
}
.stepBar::after{content:" ";width: 0;height: 0;border: solid;border-color: transparent transparent transparent #fff;border-top-width: 20px;border-right-width: 20px;border-bottom-width: 20px;border-left-width: 14px;position: absolute;left: 0px;top: 0px;
}

三、感谢

如果觉得有用欢迎点赞关注。
有问题私信我!!~~
谢谢

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com