Layui实现一个简单的布局

最新推荐文章于 2025-06-09 20:57:25 发布

编码的三叔

最新推荐文章于 2025-06-09 20:57:25 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： LayUI 文章标签：前端

本文链接：https://blog.youkuaiyun.com/ppwwp/article/details/83015587

LayUI 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了layui框架的布局组件，包括头部、侧边栏、主体和底部的实现方式，通过具体的HTML代码示例，展示了如何使用layui创建一个带有黑色背景的管理界面布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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-bg-black">
            	顶部
                <!-- 头部区域（可配合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>

在这里插入图片描述