Amamatthew/layui-header-footer-sidebar.html

## layui-header-footer-sidebar.html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title> New Document </title>
    <meta name="Generator" content="NPP-Plugin">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <style>
    /* 这里是CSS代码 */
    </style>
    <link rel="stylesheet" href="//res.layui.com/layui/build/css/layui.css?t=1483813972722" media="all">
    <link rel="stylesheet" href="//res.layui.com/css/global.css?t=1483813972722" media="all">
  </head>
   <body>
   <div class="layui-header header header-doc">
      <div class="layui-main">
        <a class="logo" href="/">
          <img src="//res.layui.com/images/layui/logo.png" alt="layui">
        </a>

        <ul class="layui-nav">
          <li class="layui-nav-item layui-this">
            <a href="/doc/">文档</a>
          </li>
          <li class="layui-nav-item ">
            <a href="/demo/">演示</a>
          </li>

          <li class="layui-nav-item">
            <a href="http://fly.layui.com/" target="_blank">社区</a>
          </li>
        <span class="layui-nav-bar"></span></ul>
      </div>
   </div>
   <div class="layui-main site-inline">
     <div class="site-tree">
      <ul class="layui-tree">

        <li><h2>基础说明</h2></li>

        <li class="site-tree-noicon layui-this ">
          <a href="/doc/"><cite>开始使用</cite></a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/base/infrastructure.html">
            <cite>底层支撑</cite>
          </a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/base/element.html">
            <cite>页面元素</cite>
            <em>规范 / 公共类、属性</em>
          </a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/base/modules.html">
            <cite>组件规范</cite>
            <em>使用 / 模块扩展</em>
          </a>
        </li>
        <li class="site-tree-noicon">
          <a href="/doc/base/faq.html">
            <cite>常见问题</cite>
          </a>
        </li>

        <li><h2>页面元素</h2></li>

        <li class="site-tree-noicon ">
          <a href="/doc/element/color.html">
            <cite>颜色</cite>
            <em>内置的色值参考</em>
          </a>
        </li>

        <li class="site-tree-noicon ">
          <a href="/doc/element/icon.html">
            <cite>图标</cite>
            <em>字体图标</em>
          </a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/element/auxiliar.html">
            <cite>辅助</cite>
            <em>引用 / 分块 / 横线…</em>
          </a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/element/button.html">
            <cite>按钮</cite>
            <em>button组</em>
          </a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/element/form.html">
            <cite>表单</cite>
            <em>form元素集合</em>
          </a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/element/nav.html">
            <cite>导航</cite>
            <em>菜单 / Tab / 面包屑 …</em>
          </a>
        </li>
        <li class="site-tree-noicon ">
          <a href="/doc/element/table.html">
            <cite>表格</cite>
            <em>table - v1.0.5 新增</em>
          </a>
        </li>


        <li><h2>内置组件</h2></li>

        <li>
          <a href="/doc/modules/layer.html">
            <i class="layui-icon" style="top: 3px;"></i><cite>弹出层</cite>
            <em>layer</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/layim.html">
            <i class="layui-icon" style="position: relative; top: 3px;"></i>
            <cite>即时通讯</cite>
            <em>layim</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/laydate.html">
            <i class="layui-icon" style="top: 1px;"></i><cite>日期时间选择</cite>
            <em>laydate</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/laypage.html">
            <i class="layui-icon"></i><cite>分页</cite>
            <em>laypage</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/laytpl.html">
            <i class="layui-icon"></i><cite>模板引擎</cite>
            <em>laytpl</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/layedit.html">
            <i class="layui-icon"></i>
            <cite>富文本编辑器</cite>
            <em>layedit</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/form.html">
            <i class="layui-icon" style="top: 2px;"></i>
            <cite>表单</cite>
            <em>form</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/upload.html">
            <i class="layui-icon"></i>
            <cite>文件上传</cite>
            <em>upload</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/element.html">
            <i class="layui-icon" style="top: 1px; font-size: 18px;"></i>
            <cite>常用元素操作</cite>
            <em>element</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/tree.html">
            <i class="layui-icon"></i>
            <cite>树形菜单</cite>
            <em>tree</em>
          </a>
        </li>

        <li>
          <a href="/doc/modules/util.html">
            <i class="layui-icon"></i>
            <cite>工具块</cite>
            <em>util</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/flow.html">
            <i class="layui-icon"></i>
            <cite>流加载</cite>
            <em>flow</em>
          </a>
        </li>
        <li>
          <a href="/doc/modules/code.html">
            <i class="layui-icon" style="top: 1px;"></i>
            <cite>代码修饰器</cite>
            <em>code</em>
          </a>
        </li>
      </ul>
    </div>
  </div>
  <div class="layui-footer footer footer-doc">
    <div class="layui-main">
      <p>2017 © <a href="/">layui.com</a> MIT license</p>
      <p>
        <a href="http://fly.layui.com/jie/3147.html" target="_blank">捐赠作者</a>
        <a href="javascript:layer.msg('暂无此页');">关于我们</a>
        <a href="mailto:xianxin@layui.com">合作联系</a>
        <a href="https://github.com/sentsin/layui/" target="_blank">Git仓库</a>
        <a href="http://fly.layui.com/jie/2461.html" target="_blank">微信公众号</a>
      </p>
    </div>
  </div>
  <!--固定块-->
  <ul class="layui-fixbar">
    <li class="layui-icon" lay-type="bar1" style=""></li>
    <li class="layui-icon layui-fixbar-top" lay-type="top" style="display: list-item;"></li>
  </ul>
  <!--弹出层-->
  <!--div class="layui-layer layui-layer-page layui-layer-dir layer-anim" id="layui-layer1" type="page" times="1" showtime="0" contype="object" style="z-index: 19891015; top: -9.5px; left: 1196px; margin-left: -15px;"><div class="layui-layer-title" style="cursor: move;">目录</div>
    <div id="" class="layui-layer-content">
      <ul class="site-dir layui-layer-wrap" style="display: block;">
        <li><a href="#before" class=""><cite>预先加载</cite></a></li>
        <li><a href="#trigger" class=""><cite>按需加载</cite></a></li>
        <li><a href="#space" class=""><cite>组件命名空间</cite></a></li>
        <li><a href="#extend" class="layui-this"><cite>扩展一个Layui组件</cite></a></li>
      </ul>
    </div>
    <span class="layui-layer-setwin"><a class="layui-layer-ico layui-layer-close layui-layer-close1" href="javascript:;"></a></span><span class="layui-layer-resize"></span>
  </div-->
  <script src="//res.layui.com/layui/build/layui.js?t=1483813972722" charset="utf-8"></script>
  <script>
  /*
  layui.config({
    base: '//res.layui.com/lay/modules/layui/'
    ,version: '1483813972722'
  }).use('global');

  window.global = {
    preview: function(){
      var preview = document.getElementById('LAY_preview');
      return preview ? preview.innerHTML : '';
    }()
  };*/
  </script>
  <script>
  layui.use(['util', 'layer'], function(){
    var util = layui.util, layer = layui.layer;
    var $ = layui.jquery;
    //固定块
    util.fixbar({
      bar1: true
      ,bar2: true
      //,css: {right: 100, bottom: 100}
      ,bgcolor: '#393D49'
      ,click: function(type){
        if(type === 'bar1'){
          layer.msg('icon是可以随便换的')
        } else if(type === 'bar2') {
          layer.msg('两个bar都可以设定是否开启')
        }
      }
    });
  });
  </script>
   </body>
</html>