小白保姆级实现--网页引导教程

·  阅读 748
小白保姆级实现--网页引导教程

1、目的

有同学问 网页引导怎么做? 出个简单实用的教程,肯定可以帮到你

2、部署步骤

使用 Intro.js

1. 打开上面放的官网,找到 install ,此处使用 cdn 引入,项目中建议使用 npm/yarn
2. cdn 引入 js + css 
3. 准备好之后 点击 Hello World! 这个选项
4.看一下 例子并把代码拿过来  试试效果 
复制代码
  • 官网

image.png

  • cdn 位置

image.png

  • Hello World!

image.png

  • 代码示例
<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、效果展示

  • 初始样子

image.png

  • 点击next

image.png

  • 点击next

image.png

  • 点击 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>

复制代码

更多精彩

小结

网页引导 并不困难,用在项目中需要注意和项目兼容性和体验

分类:
前端
收藏成功!
已添加到「」, 点击更改