Html
    Css
    Js

    
                        
body {
	width:100%;
	overflow-x:hidden;
	margin:0;
}
img {
	vertical-align:middle;
	max-width:100%;
}
body,ul,li {
	list-style:none;
	padding:0;
	margin:0;
}
.progress {
	width:100%;
	padding:10px 0;
	font-size:14px;
	background-color:#fff;
	border-bottom:1px solid #eee;
	position:fixed;
	z-index:999;
}
.progress ul {
	display:flex;
	justify-content:space-between;
	align-items:center;
}
.progress ul li {
	text-align:center;
	width:100%;
	color:#999;
	position:relative;
}
.progress ul li i {
	display:inline-block;
	width:12px;
	height:12px;
	background:#ccc;
	border-radius:100%;
	position:relative;
}
.progress ul li p {
	margin:2px 0;
}
.progress ul li.active i::after {
	content:"";
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:block;
	width:28px;
	height:28px;
	background:url(../images/icon-point-active.png) center center no-repeat;
	background-size:100% 100%;
	z-index:9;
}
.progress ul li::after {
	content:"";
	position:absolute;
	width:160%;
	height:4px;
	background:#eee;
	border-radius:4px;
	top:5px;
	left:20%;
	z-index:-1;
}
.progress ul li:last-child::after {
	display:none;
}
.progress ul li.active p {
	color:#0570DB;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

VUE版步骤条

更新时间:2022-01-11 15:41:43

0