LayUI框架虽然已经帮我们写好了主页布局，但是LayUI框架的插件较少，不足以我们使用，所以这个主页需要自己来写。
要注意的是，不能使用浮动布局，因为浮动布局比较麻烦，还要用JS来动态计算宽高，不够方便。
所以，我们采用Flex布局。
效果图：
页面分为三个部分：
头部为导航条，左边为菜单，右边为iframe，我们只要往这三个部分填充用ZUI框架写好的样式即可。
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/BuJu.css">
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="conter">
<div class="content-left">111</div>
<div class="content-right">222</div>
</div>
</div>
</body>
</html>CSS:
body {
margin: 0;
padding: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
background-color: sandybrown;
}
.header {
width: 100%;
height: 45px;
background-color: skyblue;
}
.conter {
width: 100%;
height: auto;
flex-grow: 1;
display: flex;
flex-direction: row;
justify-content: flex-start;
background-color: slateblue;
}
.content-left {
width: 200px;
height: 100%;
background-color: darkcyan;
}
.content-right {
width: auto;
height: 100%;
flex-grow: 1;
background-color: darkslategray;
}这时候，我们引入ZUI框架：(ZUI框架我是下载好的)
头部
<link rel="stylesheet" href="./dist/css/zui.min.css">
底部
<script src="./dist/lib/jquery/jquery.js"></script>
<script src="./dist/js/zui.min.js"></script>然后把之前的导航条样式，左边菜单样式，右边内容样式放在上面三块对应的区域。
效果图：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户管理主页</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./dist/css/zui.min.css">
</head>
<body>
<div class="wrapper">
<div class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<!-- 导航头部 -->
<div class="navbar-header">
<!-- 移动设备上的导航切换按钮 -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-example">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- 品牌名称或logo -->
<a class="navbar-brand" href="your/nice/url">ZUI</a>
</div>
<!-- 导航项目 -->
<div class="collapse navbar-collapse navbar-collapse-example">
<!-- 一般导航项目 -->
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="your/nice/url">项目</a></li>
<li><a href="your/nice/url">需求</a></li>
<!-- 导航中的下拉菜单 -->
<li class="dropdown">
<a href="your/nice/url" class="dropdown-toggle" data-toggle="dropdown">管理 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu">
<li><a href="your/nice/url">任务</a></li>
</ul>
</li>
</ul>
</div>
<!-- END .navbar-collapse -->
</div>
</nav>
</div>
<div class="conter">
<div class="content-left">
<nav class="menu" data-ride="menu" style="width: 200px">
<ul id="treeMenu" class="tree tree-menu" data-ride="tree">
<li><a href="#"><i class="icon icon-th"></i>首页</a></li>
<li><a href="#"><i class="icon icon-user"></i>个人资料</a></li>
<li>
<a href="#"><i class="icon icon-time"></i>更新时间</a>
<ul>
<li><a href="#">今天</a></li>
<li><a href="#">明天</a></li>
<li><a href="#">昨天</a></li>
<li><a href="#">本周</a></li>
</ul>
</li>
<li><a href="#"><i class="icon icon-trash"></i>垃圾篓</a></li>
<li><a href="#"><i class="icon icon-list-ul"></i>全部</a></li>
<li class="open">
<a href="#"><i class="icon icon-tasks"></i>状态</a>
<ul>
<li>
<a href="#"><i class="icon icon-circle-blank"></i>已就绪</a>
<ul>
<li><a href="#">已取消</a></li>
<li><a href="#">已关闭</a></li>
</ul>
</li>
<li class="active"><a href="#"><i class="icon icon-play-sign"></i>进行中</a></li>
<li><a href="#"><i class="icon icon-ok-sign"></i>已完成</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content-right">
<div class="panel" style="width: 80%;margin: 20px auto;">
<div class="panel-heading" style="text-align: center; font-size: 18px;font-weight: bold;">
搜索条件
</div>
<div class="panel-body">
<div class="col-xs-4">
<div class="input-group with-padding">
<span class="input-group-addon">用户名</span>
<input type="text" class="form-control" placeholder="请输入用户名">
</div>
</div>
<div class="col-xs-4">
<div class="input-group with-padding">
<span class="input-group-addon">性别</span>
<select class="form-control">
<option value="0">全部</option>
<option value="1">男</option>
<option value="2">女</option>
</select>
</div>
</div>
<div class="col-xs-4">
<div class="input-group with-padding">
<span class="input-group-addon">角色类型</span>
<select class="form-control">
<option value="0">全部</option>
<option value="1">高级管理员</option>
<option value="2">普通管理员</option>
</select>
</div>
</div>
<!-- 第二行 -->
<div class="col-xs-6">
<div class="input-group with-padding">
<span class="input-group-addon">创建时间</span>
<input type="text" class="form-control form-date" placeholder="请选择开始时间">
<span class="input-group-addon">至</span>
<input type="text" class="form-control form-date" placeholder="请选择结束时间">
</div>
</div>
<div class="col-xs-3">
<div class="with-padding">
<button class="btn btn-block" type="button">查询</button>
</div>
</div>
<div class="col-xs-3">
<div class="with-padding">
<button class="btn btn-block" style="background-color:red;color: white;" type="button">新增</button>
</div>
</div>
</div>
</div>
<div class="panel" style="width: 80%;margin: 20px auto;">
<div class="panel-heading" style="text-align: center; font-size: 18px;font-weight: bold;">
用户信息管理
</div>
<div class="panel-body">
<table class="table table-bordered" id="tableDataGridExample">
<thead>
<tr>
<th>用户名</th>
<th>性别</th>
<th>角色</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>tangsan</td>
<td>男</td>
<td>高级管理员</td>
<td>启用</td>
<td>
<a>重置密码</a> <a>禁用</a> <a>修改</a>
</td>
</tr>
<tr>
<td>tanghao</td>
<td>男</td>
<td>高级管理员</td>
<td>启用</td>
<td>
<a>重置密码</a> <a>禁用</a> <a>修改</a>
</td>
</tr>
</tbody>
</table>
<div class="col-xs-4">
</div>
<div class="col-xs-1">
<button class="btn btn-block" type="button">上一页</button>
</div>
<div class="col-xs-2">
<button class="btn btn-block" type="button" disabled="disabled">1/1</button>
</div>
<div class="col-xs-1">
<button class="btn btn-block" type="button">下一页</button>
</div>
<div class="col-xs-4">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="./dist/lib/jquery/jquery.js"></script>
<script src="./dist/js/zui.min.js"></script>
</html>