Layui 示例页面

下面是一个简单的 HTML 页面示例,它引用了 https://cdn.qiping.cn/layui/2.9.16/layui.js。这个页面使用了 Layui 框架的基本结构,并展示了一个简单的按钮,点击后会弹出一个消息框。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layui 示例页面</title>
    <link rel="stylesheet" href="https://cdn.qiping.cn/layui/2.9.16/css/layui.css">
    <script src="https://cdn.qiping.cn/layui/2.9.16/layui.js"></script>
    <style>
        body {
            padding: 20px;
        }
    </style>
</head>
<body>

    <h1>欢迎使用 Layui</h1>
    <button class="layui-btn" id="myButton">点击我</button>

    <script>
        // 使用 layui 的 layer 模块
        layui.use('layer', function(){
            var layer = layui.layer;

            // 为按钮添加点击事件
            document.getElementById('myButton').onclick = function() {
                layer.msg('你好,欢迎使用 Layui!');
            };
        });
    </script>

</body>
</html>

说明:

  1. 引入 CSS 和 JS:页面中通过 <link> 和 <script> 标签引入了 Layui 的 CSS 和 JavaScript 文件。
  2. 基本布局:页面包含一个标题和一个按钮。
  3. 按钮点击事件:使用 layui.use 方法加载 layer 模块,并为按钮添加了点击事件,点击按钮时会弹出一个消息框。

你可以将上述代码保存为 .html 文件并在浏览器中打开,以查看效果。