lodash实现分步骤引导提示效果代码-html代码-BFW代码库

lodash实现分步骤引导提示效果代码

代码语言：html

代码描述：lodash实现分步骤引导提示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        body,html {
    	padding:0;
    	margin:0;
    	background:#F7F8FA;
    	font-family:'Lato',sans-serif;
    	color:#676767;
    }
    .wrapper {
    	position:relative;
    	max-width:1080px;
    	margin:50px auto;
    }
    .wizard {
    	max-width:620px;
    	margin:0 auto;
    }
    .wizard__header {
    	position:relative;
    	color:#FFF;
    	padding:50px;
    	border-radius:5px;
    	border-bottom-left-radius:0;
    	border-bottom-right-radius:0;
    	text-align:center;
    	height:100px;
    	background:url("//repo.bfw.wiki/bfwrepo/image/61cc6f12e4ddb.png");
    	background-color:#4D637B;
    	background-position:center;
    	background-repeat:no-repeat;
    	background-size:cover;
    }
    .wizard__header-content {
    	position:absolute;
    	width:100%;
    	padding:0 50px;
    	text-align:center;
    	top:50%;
    	left:50%;
    	transform:translate(-50%,-60%);
    }
    .wizard__header-overlay {
    	position:absolute;
    	width:100%;
    	height:100%;
    	top:0;
    	left:0;
    	background:rgba(77,99,123,0.6);
    	border-top-left-radius:5px;
    	border-top-right-radius:5px;
    }
    .wizard__title {
    	font-size:1.5rem;
    	line-height:2rem;
    	margin:0;
    }
    .wizard__subheading {
    	text-transform:uppercase;
    	margin:0;
    	font-size:.8rem;
    	font-weight:100;
    	letter-spacing:2px;
    }
    .wizard__subheading span {
    	font-weight:600;
    }
    .wizard__steps {
    	position:absolute;
    	bottom:0;
    	left:0;
    	width:100%;
    	transform:translateY(50%);
    	z-index:10;
    }
    .wizard__footer {
    	padding:0 50px 50px;
    	border-radius:5px;
    }
    .wizard.........完整代码请登录后点击上方下载按钮下载查看