下面是一个简单的 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>
说明:
- 引入 CSS 和 JS:页面中通过
<link>和<script>标签引入了 Layui 的 CSS 和 JavaScript 文件。 - 基本布局:页面包含一个标题和一个按钮。
- 按钮点击事件:使用
layui.use方法加载layer模块,并为按钮添加了点击事件,点击按钮时会弹出一个消息框。
你可以将上述代码保存为 .html 文件并在浏览器中打开,以查看效果。