向导式html页面有哪些,html + css 页面向导

效果：

html:

1

身份认证

2

信息录入

3

人脸录入

css:

.guide{

padding: 20px;

margin-bottom: 20px;

background: #fff;

}

.guide:after{

clear: both;

content: '';

display: block;

}

.guide .guide-item{

float: left;

text-align: center;

position: relative;

width: 33.33333%;

}

.guide .guide-item:after,

.guide .guide-item:before{

content: '';

display: block;

width: 50%;

height: 4px;

background: #f4f4f4;

position: absolute;

top: 10px;

}

.guide .guide-item:after{

right: 0;

}

.guide .guide-item:before{

left: 0;

}

.guide .guide-item:first-of-type:before{

display: none;

}

.guide .guide-item:last-of-type:after{

display: none;

}

.guide .guide-item.over span,

.guide .guide-item.on span,

.guide .guide-item.on:before,

.guide .guide-item.over:after,

.guide .guide-item.over:before{

background: #007aff;

color: #fff;

}

.guide .guide-item.on span{

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-ms-transform: scale(1.2);

-o-transform: scale(1.2);

transform: scale(1.2);

}

.guide .guide-item span{

display: inline-block;

width: 24px;

height: 24px;

text-align: center;

line-height: 24px;

border-radius: 50%;

background: #f4f4f4;

font-weight: bold;

font-size: 16px;

position: relative;

z-index: 10;

}

.guide .guide-item p{

font-size: 12px;

color: #808080;

padding-top: 5px;

}