HTML部分（一些具体的看官方文档）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/layui.css">
<link rel="stylesheet" href="laydemo.css">
</head>
<body>
<!--头部-->
<header class="layui-bg-black">
<div>后台管理系统</div>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item">
<a href="javascript:;">黄雅华</a>
<dl class="layui-nav-child"> <!-- 二级菜单 -->
<dd><a href="">个人中心</a></dd>
<dd><a href="">退出</a></dd>
</dl>
</li>
</ul>
</header>
<!--主体-->
<div class="main">
<!-- 左侧导航-->
<div class="left layui-bg-black">
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
</div>
<!-- 右侧主体内容-->
<div class="right">
<!-- 面包屑导航-->
<div class="breadcrumb">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="">国际新闻</a>
<a href="">亚太地区</a>
<a><cite>正文</cite></a>
</span>
</div>
<!-- 表单相关-->
<div class="my-input-g layui-form">
<div class="my-input">
<input type="text" name="title" required
lay-verify="required" placeholder="请输入标题"
autocomplete="off" class="layui-input">
</div>
<!-- 下拉菜单-->
<div class="my-input">
<select name="city" lay-verify="required">
<option value=""></option>
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
<option value="3">深圳</option>
<option value="4">杭州</option>
</select>
</div>
<!--时间选择-->
<div class="my-input">
<input type="text" class="layui-input" id="data" placeholder="选择时间">
</div>
<!-- 按钮-->
<div class="my-input">
<button type="button" class="layui-btn layui-btn-radius layui-btn-normal">
<i class="layui-icon"></i> 搜索
</button>
</div>
</div>
<!-- 表格-->
<table class="layui-table">
<colgroup>
<col width="150">
<col width="200">
<col>
</colgroup>
<thead>
<tr>
<th>昵称</th>
<th>加入时间</th>
<th>签名</th>
</tr>
</thead>
<tbody>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>贤心</td>
<td>2016-11-29</td>
<td>人生就像是一场修行</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
<tr>
<td>许闲心</td>
<td>2016-11-28</td>
<td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
</tr>
</tbody>
</table>
<!-- 分页-->
<div id="myPage">
</div>
</div>
</div>
<!--底部-->
<footer>
<!-- 版权-->
©CollAnan
</footer>
<script src="layui.js"></script>
<script>
//一般直接写在一个js文件中
//use 引入 layer插件 form表单 里面有个回调函数
// layui.use(['layer', 'form'], function(){
// var layer = layui.layer
// ,form = layui.form;
//
// layer.msg('Hello World');
// });
//注意：导航 依赖 element 模块，否则无法进行功能性操作
layui.use(['element', 'form', 'laydate' , 'laypage'], function () {
// 上面是声明 下面实例化
var element = layui.element;
var form = layui.form;
var laydate = layui.laydate;
var laypage = layui.laypage;
laypage.render({
elem: 'myPage' //注意，这里的 test1 是 ID，不用加 # 号
,count: 50 //数据总数，从服务端得到
});
//执行一个laydate实例
laydate.render({
elem: '#data' //指定元素
});
});
</script>
</body>
</html>
自己写的CSS部分：
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
header {
height: 60px;
display: flex;
/*里面元素两边对齐*/
justify-content: space-between;
/*文字居中*/
align-items: center;
padding-left: 10px;
}
header > div {
font-size: 26px;
}
/*主体部分*/
.main {
/*浏览器多宽 他就多宽*/
width: 100vw;
height: calc(100vh - 120px);
background-color: lightcoral;
display: flex;
justify-content: flex-start;
}
/*左侧导航*/
.main .left {
height: 100%;
width: 200px;
background-color: #0000FF;
}
/*右侧导航*/
.main .right {
height: 100%;
width: calc(100vw - 200px);
background-color: #fff;
padding: 5px 10px;
/*此元素的内边距和边框不再会增加它的宽度 整体大小不改变*/
box-sizing: border-box;
}
/*input相关*/
.main .right .my-input-g {
display: flex;
justify-content: left;
align-items: center;
margin: 20px 0;
}
.main .right .my-input-g .my-input {
width: 200px;
margin-right: 20px;
}
/*底部*/
footer {
height: 60px;
background-color: #000;
color: #fff;
}
效果：
版权声明：本文为weixin_43324141原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。