driver.js实现页面引导层新手教程指引示例代码-html代码-BFW代码库

driver.js实现页面引导层新手教程指引示例代码

代码语言：html

代码描述：driver.js实现页面引导层新手教程指引示例代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/driver.min.css">

    <style>
        @import url("https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Work+Sans:wght@400;600&display=swap");
        body {
        	background: #bc4e9c;
        	background: -webkit-gradient(
        		linear,
        		left top,
        		right top,
        		from(#f80759),
        		to(#bc4e9c)
        	);
        	background: -o-linear-gradient(left, #f80759, #bc4e9c);
        	background: linear-gradient(to right, #f80759, #bc4e9c);
        }
        h1,
        h4 {
        	font-family: "Lato", sans-serif;
        }
        p,
        span,
        input[type="text"],
        button {
        	font-family: "Work Sans", sans-serif !important;
        }
        p {
        	line-height: 26px;
        }
        input[type="text"] {
        	width: 100%;
        	padding: 10px;
        	-webkit-box-sizing: border-box;
        	box-sizing: border-box;
        	border-radius: 3px;
        	border: 1px solid #dadada;
        	font-size: 16px;
        	margin-top: 10px;
        }
        .container {
        	width: 80%;
        	padding: 40px 80px;
        	-webkit-box-sizing: border-box;
        	box-sizing: border-box;
        	background: #fff;
        	margin: auto;
        	margin-top: 3rem;
        }
        #start {
        	background: #f953c6;
        	padding: 10px 20px;
        	color: #fff;
        	border: none;
        	margin-bottom: 20px;
        }
        .flex_div {
        	display: -webkit-box;
        	display: -ms-flexbox;
        	display: flex;
        	-webkit-box-pack: justify;
        	-ms-flex-pack: justify;
        	justify-content: space-between;
        	-ms-flex-wrap: wrap;
        	flex-wrap: wrap;
        }
        .three_fourth {
        	width: 70%;
        }
        .one_half {
        	width: 45%;
        }
        .one_fourth {
        	width: 20%;
        }
        .step_indicator {
        	color: #808080;
        }
        .divider {
        	width: 100%;
        	height: 1px;
        	background: #dadada;
        }
        .spacer {
        	width: 100%;
        	height: 20px;
        }
        .bolder {
        	font-weight: 600;
        }
        .gray_text {
        	color: #808080;
        }
        .visibility {
        	font-size: 14px;
        }
        .private,
        .public {
        	border: 1px solid #0575e6;
        	padding: 20px;
        	-webkit-box-sizing: border-box;
        	box-sizing: border-box;
        	border-radius: 5px;
        	text-align: center;
        }
        .public {
        	border: 1px solid #ff00cc;
        }
        .theme_color {
        	width: 100%;
        	height: 15px;
        	border-radius: 10px;
        	margin-top: 10px;
        }
        .theme_blue {
        	background: #333399;
        	margin-top: 20px;
        }
        .theme_orange {
        	background: #fc4a1a;
        }
        .theme_green {
        	background: #38ef7d;
        }
        .save_board {
     .........完整代码请登录后点击上方下载按钮下载查看