使用的是最新的layui2.5.6
1、UI效果
2、代码
需要根据自己的项目,对下面代码中注释了TODO的地方进行修改。(当然,至于其他js/css文件也需要具体情况具体修改)
(下面的代码只是管理界面的架子,不包含右边的页面主体区域。)
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>管理系统</title>
<link rel="stylesheet" href="./lib/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<!-- 顶部区域 -->
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">后台管理系统</div>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="./images/user3.png" class="layui-nav-img">
小米
</a>
<dl class="layui-nav-child">
<dd>
<!--TODO -->
<!--需要修改为自己项目的部分:-->
<!--1、属性data-url(需要在右边选项卡中打开的页面的路径) -->
<!--2、属性data-title(选项卡标题)-->
<!--3、属性data-id必须唯一,tab选项卡根据这个值进行切换-->
<a href="#" data-url="profile" data-title="个人资料" data-id="44" class="site-demo-active"
data-type="tabAdd">
个人资料
</a>
</dd>
<dd>
<!--TODO -->
<!--需要修改为自己项目的部分:-->
<!--1、属性data-url(需要在右边选项卡中打开的页面的路径) -->
<!--2、属性data-title(选项卡标题)-->
<!--3、属性data-id必须唯一,tab选项卡根据这个值进行切换-->
<a href="#" data-url="password" data-title="修改密码" data-id="55" class="site-demo-active" data-type="tabAdd">
修改密码
</a>
</dd>
</dl>
</li>
<li class="layui-nav-item">
<!--TODO -->
<!--可能需要修改路径-->
<a href="/user/logout">退出</a>
</li>
</ul>
</div><