使用layui布局

1. 引入css和js

<link rel="stylesheet" href="layui/css/layui.css" />
<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

2.body

 

 

 

 

 

 3． 头部导航

1）改变背景颜色

<style type="text/css">
.layui-layout-admin .layui-header {
background-color: #1E9FFF;
}
</style>

2）布局

<!-- 顶部 -->
        <div class="layui-header" style="color: white;">
            <div class="layui-logo" style="color: white;">layui后台布局</div>
            <ul class="layui-nav layui-layout-left">
                <li class="layui-nav-item"><a href="">layui文档</a></li>
                <li class="layui-nav-item"><a href="">layui文档</a></li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="">layui文档</a></li>
                <li class="layui-nav-item"><a href="">layui文档</a></li>
            </ul>
        </div>

效果图

 

 

4． 侧边导航

 

<script type="text/javascript">
  //引入插件后的第一步是在页面加载事件里对layui插件的element属性进行渲染
  //只有渲染了layui的element属性才能够使用layui的类进行侧边导航的布局
      $(function(){
          layui.use("element");
      });
      
  </script>
!-- 左侧导航 -->
        <div class="layui-side layui-bg-blue">
            <div class="layui-side-scroll">
                <ul class="layui-nav layui-nav-tree"  lay-filter="test">
                    <li class="layui-nav-item">
                        <a href="javascript:;">用户管理<span class="layui-nav-more"></span></a>
                        <dl class="layui-nav-child">
                            <dd><a href="">查看信息</a></dd>
                            <dd><a href="">查看信息</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

 

 

5． 右侧主题内容

<!-- 右侧内容 -->
        <div class="layui-body" style="margin-left: 20px;">
            <iframe src="https://www.baidu.com/" frameborder="0" height="100%" width="90%"></iframe>
        </div>

 

 

6.底部固定区域
<!-- 底部导航 -->
<div class="layui-footer"> 测试layui - 底部固定区域</div>