Layui是一个样式比较丰富艳丽的UI框架,通过自学了相关api文档,自己手工搭建了一个后台管理页面。页面布局是常用的一套,上面是一个标志,左边区域是一个导航,中间是内容标签页,底部是版权信息,好了,看代码吧!
& lt; !doctype html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; meta name=" viewport "
内容="宽度=设备宽度,user-scalable=不,初始=1.0,最大范围=1.0,最小规模=1.0”比;
& lt;元http-equiv=癤-UA-Compatible”内容=癷e=边缘”比;
& lt; title>黄宝康个人搭建的后台管理页面& lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/css/layui.css " rel=巴獠縩ofollow”比;
& lt;脚本src=" https://www.yisu.com/zixun/layui.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div类=發ayui-layout-admin”比;
& lt; !——头部——比;
& lt; div类=發ayui-header”比;
& lt; div类=" layui-logo "祝辞黄BaoKang
& lt; ul类=" layui-nav layui-layout-left”比;
& lt;李类=" layui-nav-item "祝辞& lt; a href=" javascript:无效(0)”rel=巴獠縩ofollow”在控制台& lt;/a> & lt;/li>
& lt;李类=" layui-nav-item "祝辞& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在商品管理& lt;/a> & lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在其他系统& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞邮件管理& lt;/a> & lt;/dd>
& lt; dd> & lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞消息管理& lt;/a> & lt;/dd>
& lt; dd> & lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”祝辞授权管理& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;/ul>
& lt; ul类=" layui-nav layui-layout-right”比;
& lt;李类=發ayui-nav-item”比;
& lt; a href="祝辞& lt; img src=" https://www.yisu.com/zixun/rel="外部nofollow“http://m.zhengjinfan.cn/images/0.jpg”class=發ayui-nav-img”在黄BaoKang
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href="祝辞基本资料& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞安全设置& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt; !——左侧——比;
& lt; div class=" layui-side layui-bg-black”比;
& lt; div类=發ayui-side-scroll”比;
& lt; ul类=" layui-nav layui-nav-tree lay-filter”=癶bkNavbar”比;
& lt;李类=發ayui-nav-item”比;
& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”在基本元素& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd lay-id=" 111 "祝辞& lt; a href=" javascript:,“rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”rel=巴獠縩ofollow”数据选项=" {url:“test.html”,标题:“表格“}”在表格& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞表单& lt;/a> & lt;/dd>
& lt; dd> & lt; a href="祝辞导航栏& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李class=" layui-nav-item layui-nav-itemed”比;
& lt; a href="祝辞组件& lt;/a>
& lt; dl类=發ayui-nav-child”比;
& lt; dd> & lt; a href="祝辞Navbar & lt;/dd>
& lt; dd> & lt; a href="祝辞Tab & lt;/dd>
& lt; dd> & lt; a href="祝辞OneLevel & lt;/dd>
& lt; dd> & lt; a href="祝辞app.js主入口& lt;/a> & lt;/dd>
& lt;/dl>
& lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href="祝辞表格& lt;/a>
& lt;/li>
& lt;李类=發ayui-nav-item”比;
& lt; a href="祝辞表单& lt;/a>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/div>
& lt; !——中间主体——比;
& lt; div类=" layui-body " id=叭萜鳌北?
& lt; div类=發ayui-tab lay-filter”=氨昵眑ay-allowClose=" true "比;
& lt; ul类=發ayui-tab-title”比;
& lt;李类=" layui-this "祝辞首页& lt;/li>
& lt;/ul>
& lt; div类=發ayui-tab-content”比;
& lt; div class=" layui-tab-item layui-show”在首页内容& lt;/div>
& lt;/div>
& lt;/div>
& lt;/div>
& lt; !——底部——比;
& lt; div类=發ayui-footer”比;
& lt; center>黄宝康版权所有,复印件;电话:18679758769 & lt;/center>
& lt;/div>
& lt;/div>
& lt; script>//JavaScript代码区域
layui。使用(“元素”,函数(){
var元素=layui.element;
element.on (nav (hbkNavbar),函数(elem) {/*使用DOM操作获取超链接的自定义数据属性值*/var选项=eval (' (' + elem.context.children [0] .dataset.options + ') ');
var url=options.url;
var标题=options.title;
element.tabAdd(“标签”,{
标题:标题、
内容:“& lt; iframe滚动=白远敝”咴?" 0 " src=" + url +”祝辞& lt;/iframe>”,
id:“111”
});
});/*使用下面的方式需要引用jquery *//* $ ('。layui-nav-child”)。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
