html5步骤条,自定义步骤条 , 纯原生html + css

只需要给所在步骤加current-n 类名就行

html

身份验证

资料验证

资料补充

实人认证

css样式

在这里插入代码片

```

.progress-x {

width: 100%;

display: flex;

align-items: center;

margin-left: 13%;

}

.progress-x > div.zb-div {

display: flex;

align-items: center;

flex: 25%;

}

.progress-x .zb-line {

text-align: center ;

width: calc(100% - 10px);

height: 1px;

border: 1px solid #ddd;

background: #ccc;

}

.progress-x > div > span.zb-number {

width: 8px;

height: 8px;

text-align: center;

border-radius: 50%;

border: 1px solid #ddd;

color: #ccc;

background: #fff;

}

.progress-x > div.current-n > span.zb-number {

width: 13px;

height: 13px;

border: 1px solid #178cff;

color: #fff;

background: #178cff;

}

.step{

width: 100%;

display: flex;

align-items: center;

text-align: center;

}

.step>span.current-n{

font-size: 16px;

}

.zb-title{

margin-top: 5px;

flex: 25%;

font-size: 14px;

}

标签：flex,center,自定义,align,zb,width,html,progress,css

来源： https://blog.csdn.net/luoman612/article/details/115898545

html5步骤条,自定义步骤条 , 纯原生html + css相关推荐

HTML滑动条自动滑动,HTML5新特性——自定义滑动条（input[type=range]）
HTML 4.01 与 HTML5之间的差异以下 input 的 type属性值是 HTML5 中新增的: color.date.datetime.datetime-local.month.week ...
VUE中自定义步骤条
VUE中自定义步骤条下列自定义步骤条是根据elementUI中的el-step的样式改编而得.记录下自己改编过程!!! <template><div class='steps el ...
uniapp自定义步骤条
由于这次使用的uview的ui库中的步骤条不能自定义图标,所以自己用盒子写了一个,先看一下效果直接上代码: <view class="steps"><view ...
Vue学习笔记：Vue中封装自定义步骤条实现上下一步
Vue中封装自定义步骤条实现上下一步效果图: 如上图:在VUE中实现效果,VUE+Element,ant都有封装好的UI,直接引用就好了: 这里,觉得样式不符合UI设计,所以自定义封装了一个步骤条 ...
小白福利篇，直播APP开发的6条基本步骤
伴随如今的直播领域不断扩张,发展也呈上升趋势,不管是直播带货.直播教育.还是游戏直播,都能够影响不同年龄的不同人群,尤其是赶在这个直播的红利期,所以更多人选择开发自己的直播平台,想在这个直播风口期大捞 ...
android 自定义progressbar demo,Android 自定义进度条ColorfulProgressbar，原理简单、效果还行...
效果图: demo效果演示演示Demo 特性与原生Progress相比,感觉更漂亮一点,可以显示进度值,背景凹凸感明显,进度条效果更加立体. 原理说明额,挺简单的.不过感觉我的做法有点复杂了,我 ...
vue+flvjs实现自定义控制条的流媒体播放器
vue+flvjs实现自定义控制条的流媒体播放器 flvjs与FLV有什么区别和联系? flv.js 是 HTML5 Flash 视频(FLV)播放器,纯原生 JavaScript 开发,没有用到 F ...
IOS开发-关于自定义TabBar条
今天在做项目的时候,突然有一个模块需要自定义TabBar条. 在平常很多做项目的时候,都没有去自定义过,大部分都是使用系统自带的.今天整理一个自定义TabBar条的步骤. 首先看下我们最终实现的效果: ...
Polyworks脚本开发学习笔记(十七)-制作宏脚本自定义工具条
Polyworks脚本开发学习笔记(十七)-制作宏脚本自定义工具条做好的宏脚本程序,每次打开脚本加载程序太多麻烦,为了方便的调用脚本做各种操作,可以使用系统的自定义工具条功能将脚本加载到工具条上. ...

html5步骤条,自定义步骤条 , 纯原生html + css

html5步骤条,自定义步骤条 , 纯原生html + css相关推荐

最新文章

热门文章