1、目的
有同学问 网页引导怎么做？ 出个简单实用的教程，肯定可以帮到你
2、部署步骤
使用 Intro.js
1. 打开上面放的官网，找到 install ，此处使用 cdn 引入，项目中建议使用 npm/yarn
2. cdn 引入 js + css
3. 准备好之后 点击 Hello World! 这个选项
4.看一下 例子并把代码拿过来 试试效果
- 官网
- cdn 位置
- Hello World!
- 代码示例
<div data-title="Welcome!" data-intro="Hello World! 👋" class="card-demo">
<div class="card shadow--md">
<div class="card__image" data-intro="Intro.js can highlight on elements">
<img
src="..."
alt="Image alt text"
title="Logo Title Text 1"
/>
</div>
<div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
<h4>Quaco Lighthouse</h4>
<small>
The Quaco Head Lighthouse is a well maintained lighthouse close to St.
Martins. It is a short, beautiful walk to the lighthouse along the
seashore.
</small>
</div>
</div>
</div>
3、效果展示
- 初始样子
- 点击next
- 点击next
- 点击 done 结束 good !
4、项目完整代码地址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.bootcdn.net/ajax/libs/intro.js/6.0.0/introjs.css"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div data-title="Welcome!" data-intro="Hello World! 👋" class="card-demo">
<div class="card shadow--md">
<div
class="card__image"
data-intro="Intro.js can highlight on elements"
>
<img
src="https://xxxxx.png"
alt="Image alt text"
title="Logo Title Text 1"
/>
</div>
<div
class="card__body"
data-title="Farewell!"
data-intro="And this is the last step!"
>
<h4>Quaco Lighthouse</h4>
<small>
The Quaco Head Lighthouse is a well maintained lighthouse close to
St. Martins. It is a short, beautiful walk to the lighthouse along
the seashore.
</small>
</div>
</div>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/intro.js/6.0.0/intro.js"></script>
<script>
introJs().start()
</script>
</html>
小结
网页引导 并不困难，用在项目中需要注意和项目兼容性和体验
