主菜单的基本界面

原创 2019-02-09 18:39:58 573
摘要:<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>欢迎</title>    <link rel="stylesh

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>欢迎</title>
   <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
   <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
   <style type="text/css">
body{margin: 0px}
       .header{width: 100%; height: 50px;line-height:50px; background: #01AAED; color: #FFFFFF; }
       .title{margin-left: 20px; font-size:20px;}
       .userinfo{float: right; margin-right: 10px;}

       .menu{width: 200px; background: #333744; position: absolute;}
       .main{position: absolute;  left:200px; right: 0px;}

       .layui-collapse{border:none;}
       .layui-colla-item{border-top: none;}
       .layui-colla-title{background: #42485b;color:#FFFFFF;}
       .layui-colla-content{    border-top:none ;padding: 0px;}


   </style>
   <div class="header">
       <span class="title"> 后台管理系统</span>
       <span class="userinfo" >admin<a href="javascript:;">退出</a> </span>
   </div>

</head>
<body>
<!---左方菜单-->
<div class="menu" id="menu">
       <div class="layui-collapse" lay-accordion>
           <div class="layui-colla-item">
                <h2 class="layui-colla-title">主菜单</h2>
                 <div class="layui-colla-content">
                     <ul class="layui-nav layui-nav-tree">
                         <li class="layui-nav-item"><a href="javascript:;">菜单列表</a> </li>
                     </ul>
                 </div>

           </div>
       </div>
  </div>

<!-- 主操作区-->
<div class="main">
       <iframe src="/index.php/admin/home/welcome" onload="resetMainHeight(this)" style="width: 100%; height: 100%" frameborder="0" scrolling="0"></iframe>
   </div>

</body>
</html>

<script type="text/javascript">
layui.use(['element','layer'], function(){
       var element = layui.element;
$ = layui.jquery;
layer = layui.layer;
resetMenuHeight();
});
//重新设置页面高度
function resetMenuHeight(obj) {
       var height= document.document.documentElement.clientHeight - 50;
$('#menu').height(height);
}
   //重设主操作区高度
function resetMainHeight(obj) {
       var height= parent.document.documentElement.clientHeight - 53;
$(obj).parent('div').height(height);
}

</script>

批改老师:韦小宝批改时间:2019-02-11 10:13:54
老师总结:写的很不错 使用layui来实现方面又快捷 而且还美观 继续加油吧!

发布手记

热门词条