layUi框架入门篇（二）——布局

今天我们继续就layUi官网提供的文档来一次后台布局，官网如下：

https://www.layui.com/doc/

效果如下：

1、

正常的布局大致的内容概括：

头部
侧边栏
内容
底部

但是layUi提供了一个更加方便，更加美观，更加完善的布局

头部
侧边栏
内容
底部
	

效果如下：

如果代码同上相同的朋友，却没有相同的效果——我放大了 = > =。

或者朋友你没有引入layUi 核心CSS，和JS文件，模块没有载入。

这里我不补充了，你可以看看我的入门篇（一）。

到这里，我们是不是已经算是完成了大半，剩下的只是具体内容，我们可以去layUi文档——导航部分，链接如下：

里面没有的就是我们的 “后台名称” “头部导航” “用户信息” “侧边栏导航” 这些具体内容

这里我们也可以引用layUi的自带样式功能：

ps：以下内容为简略版

		
后台名称
头部导航
用户信息

在layUi中导航

水平、垂直、侧边三个导航的HTML结构是完全一样的，不同的是：

垂直导航需要追加class：layui-nav-tree

侧边导航需要追加class：layui-nav-tree layui-nav-side

所以侧边栏我们可以添加：

		
侧边栏导航

注意以下class： layui-side-

侧边栏导航的滚轮设置，我们内容超出时，是被的，可以使用滚轴来下移

最后就是内容部分：

可以使用,宽高100%来布满

教程参考如下：

亦可以使用 的load来载入：

$(“XXX”).load(“XXX.html”)

我们看看效果吧：

最终代码如下：

ps：引入文件自己注意！！！

layui 后台布局
layui文档
layui文档
侧边栏导航
© layui.com - 底部固定区域