使用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>