mui步骤条实现方法代码实例，直接就能用，无需二次加工操作，结合数据渲染，可以做到快递进度步骤条，满足于html和h5的mui开发

勇闯天亚

于 2019-12-19 13:32:53 发布

阅读量1.1k

点赞数 1

分类专栏： MUI 前端 HBuilderX 文章标签： mui 步骤条 html步骤条 h5步骤条前端开发

本文链接：https://blog.csdn.net/u012442504/article/details/103612820

版权

本文提供了一个可以直接使用的mui步骤条代码实例，无需二次开发，适用于html和h5环境。通过结合数据渲染，可以轻松实现动态进度步骤条。资源包括js文件和压缩包，可从指定CSDN链接下载。

摘要由CSDN通过智能技术生成

资源地址：https://download.csdn.net/download/u012442504/12040384

js资源地址：https://download.csdn.net/download/u012442504/16270173

直接上代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>步骤条step</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="css/mui.min.css">	
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				box-sizing: border-box
			}

			.eis-horizontal-steps .eis-form-steps {
				overflow: hidden;
				padding: 0;
				font-size: 0;
				position: relative
			}

			.eis-vertical-steps .eis-form-steps {
				overflow: hidden;
				padding: 0;
				font-size: 0;
				position: relative;
				width: 150px;
				float: left
			}

			.eis-horizontal-steps .eis-form-steps .eis-form-step {
				display: inline-block;
				vertical-align: middle;
				width: 33.33333%;
				text-align: center
			}

			.eis-vertical-steps .eis-form-steps .eis-form-step {
				text-align: left;
				height: 80px
			}

			.eis-horizontal-steps .eis-form-steps .eis-step-progress {
				height: 2px;
				background: #4995fa;
				width: 0;
				position: absolute;
				top: 15px;
				left: 15px;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				-o-transition: all .4s;
				transition: all .4s
			}

			.eis-vertical-steps .eis-form-steps .eis-step-progress {
				width: 2px;
				background: #4995fa;
				height: 0;
				position: absolute;
				top: 15px;
				left: 15px;
				-webkit-transition: all .4s;
				-moz-transition: all .4s;
				-ms-transition: all .4s;
				-o-transition: all .4s;
				transition: all .4s
			}

			.eis-horizontal-steps .eis-form-steps .eis-step-head {
				width: 100%;
				position: relative
			}

			.eis-vertical-steps .eis-form-steps .eis-step-head {
				float: left;
				height: 100%;
				position: relative
			}

			.eis-step-head .eis-step-icon {
				width: 30px;
				height: 30px;
				font-size: 16px;
				border-radius: 50%;
				position: relative;
				z-index: 1;
				cursor: pointer
			}

			.is-finish .eis-step-icon {
				border: 1px solid #4995fa
			}

			.eis-step-head .eis-step-icon .step-icon-txt {
				width: 26px;
				height: 26px;
				background: #ddd;
				border: 1px solid #ddd;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				border-radius: 50%;
				text-align: center;
				line-height: 26px;
				color: #fff;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto
			}

			.is-finish .eis-step-icon .step-icon-txt {
				background: #4995fa;
				border: 1px solid #4995fa
			}

			.eis-horizontal-steps .eis-step-head .eis-step-line {
				position: absolute;
				background-color: #f1f1f1;
				height: 2px;
				top: 15px;
				left: 28px;
				right: -4px
			}

			.eis-vertical-steps .eis-step-head .eis-step-line {
				position: absolute;
				background-color: #f1f1f1;
				width: 2px;
				height: 100%;
				top: 15px;
				left: 15px
			}

			.eis-horizontal-steps .eis-form-step .ei

最低0.47元/天解锁文章

勇闯天亚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
5
评论
mui步骤条实现方法代码实例，直接就能用，无需二次加工操作，结合数据渲染，可以做到快递进度步骤条，满足于html和h5的mui开发

直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>步骤条step</title> <meta name="viewport" content="width=device-width, initial-scale=1,m...
复制链接

扫一扫

专栏目录