前端实现网站新手指引

最新推荐文章于 2024-04-29 21:35:15 发布

szx的开发笔记

最新推荐文章于 2024-04-29 21:35:15 发布

阅读量537

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/SongZhengxing_/article/details/125482896

版权

javascript 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

<!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">
    <title>Document</title>
</head>

<body>
    <style>
        .left-top {
            position: absolute;
            left: 20px;
            top: 20px;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }

        .right-top {
            position: absolute;
            right: 20px;
            top: 20px;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }

        .left-bottom {
            position: absolute;
            left: 20px;
            bottom: 20px;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }

        .right-bottom {
            position: absolute;
            right: 20px;
            bottom: 20px;
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
    </style>
    <div class="main">
        <div class="left-top">left-top</div>
        <div class="right-top">right-top</div>
        <div class="left-bottom">left-bottom</div>
        <div class="right-bottom">right-bottom</div>
    </div>

    <script src="https://unpkg.com/guide-tips/dist/guide-tips.min.js"></script>
    <script>
        const gt = new GuideTips({
            guideList: [{
                els: [".left-top"],
                title: "第一步",
                context: "第一步第一步第一步"
            }, {
                els: [".right-top"],
                title: "第二步",
                context: "第二步第二步第二步"
            }, {
                els: [".left-bottom"],
                title: "第三步",
                context: "第三步第三步第三步"
            }, {
                els: [".right-bottom"],
                title: "第四步",
                context: "第四步第四步第四步"
            }]
        });
        gt.begin();
    </script>

</body>

</html>