layui-MainDemo

最新推荐文章于 2025-09-11 02:13:59 发布

原创最新推荐文章于 2025-09-11 02:13:59 发布 · 4.9k 阅读

5 ·

CC 4.0 BY-SA版权

Layui 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一个基于layui框架的网页布局示例，详细展示了如何使用layui构建包含头部、侧边栏、主体内容区及底部的常见后台管理系统布局。通过具体代码示例，读者可以了解layui在页面布局方面的应用。

layui-MainDemo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="layui/css/layui.css">
    </head>
    <body>
        <div class="layui-layout layui-layout-admin">
            <div class="layui-header">
                <!-- 头部区域（可配合layui已有的水平导航） -->
            </div>
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                </div>
            </div>
            <div class="layui-body">
                <!-- 内容主体区域 -->
            </div>
            <div class="layui-footer">
                <!-- 底部固定区域 -->
            </div>
        </div>

<script src="layui/layui.js"></script>      
<script>
//JavaScript代码区域
</script>
    </body>
</html>

这里写图片描述

官网layui在线调试