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

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

   
   
  • 1

效果如下:
在这里插入图片描述

1、
正常的布局大致的内容概括:

<body class="layui-layout-body">
	<div class="layui-header">头部</div>
	<div class="layui-side layui-bg-black">侧边栏</div>
	<div class="layui-body">内容</div>
	<div class="layui-footer">底部</div>
<body>

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

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

<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">头部</div>
		<div class="layui-side layui-bg-black">侧边栏</div>
		<div class="layui-body">内容</div>
		<div class="layui-footer">底部</div>
	</div>	
<body>

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

效果如下:
在这里插入图片描述

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

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

这里我不补充了,你可以看看我的入门篇(一)。

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

https://www.layui.com/doc/element/nav.html

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

这里我们也可以引用layUi的自带样式功能:
ps:以下内容为简略版

		<div class="layui-logo">后台名称</div>
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">头部导航</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item"><a href="">用户信息</a></li>
        </ul>

   
   
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在layUi中导航
水平、垂直、侧边三个导航的HTML结构是完全一样的,不同的是:
垂直导航需要追加class:layui-nav-tree
侧边导航需要追加class:layui-nav-tree layui-nav-side

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

		<div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                <li class="layui-nav-item"><a href="">侧边栏导航</a></li>
            </ul>
        </div>

   
   
  • 1
  • 2
  • 3
  • 4
  • 5

注意以下class: layui-side-scroll

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

最后就是内容部分:

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

iframe教程参考如下:

http://www.w3school.com.cn/tags/tag_iframe.asp

<iframe></iframe>

   
   
  • 1

亦可以使用jQuery 的load来载入:
$(“XXX”).load(“XXX.html”)

我们看看效果吧:
在这里插入图片描述

最终代码如下:

ps:引入文件自己注意!!!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
&lt;link rel="stylesheet" href="layui/css/layui.css"&gt;
&lt;script src="layui/layui.js"&gt;&lt;/script&gt;

</head>
<body class=“layui-layout-body” style=“overflow: hidden”>
<div class=“layui-layout layui-layout-admin”>
<div class=“layui-header”>
<div class=“layui-logo”>layui 后台布局</div>
<ul class=“layui-nav layui-layout-left”>
<li class=“layui-nav-item”><a href=“”>layui文档</a></li>
</ul>
<ul class=“layui-nav layui-layout-right”>
<li class=“layui-nav-item”><a href=“”>layui文档</a></li>
</ul>
</div>

&lt;div class="layui-side layui-bg-black"&gt;
    &lt;div class="layui-side-scroll"&gt;
        &lt;ul class="layui-nav layui-nav-tree"  lay-filter="test"&gt;
            &lt;li class="layui-nav-item"&gt;&lt;a href=""&gt;侧边栏导航&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="layui-body" &gt;
    &lt;!-- 内容主体区域 --&gt;
    &lt;iframe src="https://www.baidu.com/" frameborder="0" height="100%" width="100%"&gt;&lt;/iframe&gt;
&lt;/div&gt;

&lt;div class="layui-footer"&gt;
    &lt;!-- 底部固定区域 --&gt;
    © layui.com - 底部固定区域
&lt;/div&gt;

</div>
<!–<script src=“…/src/layui.js”></script>–>
<script>
//JavaScript代码区域
layui.use(‘element’, function(){
var element = layui.element;

});

</script>
</body>
</body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐