layout(布局)

布局容器有4个区域：头部选项条、左侧选项目录、右侧内容上方的选项卡（tabs）、右侧中间内容区域。北、南、东、西和中间。

创建布局

1、使用完整页面创建布局

（1）头部选项条

<div class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container-fluid cl">
            <a class="logo navbar-logo f-l mr-10 hidden-xs" href="javascript:;</a>
            <div id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                <ul class="cl">
                    <li>您好, 开发者</li>
                    <li class="dropDown dropDown_hover">
                        <a class="dropDown_A" href="#">开发者<i class="Hui-iconfont"></i></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;">清除缓存</a></li>
                            <li><a href="javascript:;">修改密码</a></li>
                            <li><a href="javascript:;">安全退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

（2）左侧选项目录

<div class="Hui-aside">
    <div class="menu_dropdown bk_2">
        <dl class="menu-hos">            <!-- 一级导航 -->            <dt>应用管理</dt>            <!-- 二级导航 -->
            <dd>
                <ul>
                    <li><a href="javascript:;" _href="api.php" data-title="API的应用">API的应用</a></li>
                </ul>
            </dd>
        </dl>
    </div>
</div>

目前的H-adminUI版本只支持到二级导航，暂不支持三级导航。如需要在内容区域打开新的页面，需要在二级导航的a标签设置 "_href" 属性，填入需要打开的页面的url，注意与 "href" 属性区分，前者比后者多了下划线 "_"。当前打开的页面会有相应的选项显示在内容区域上方的选项卡上，通过设置a标签的 "data-title" 属性可以设置当前页面的title，方便使用者更直观的知道当前页面的内容。

（3）主要内容区域

<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<section class="Hui-article-box">
    <div id="Hui-tabNav" class="Hui-tabNav hidden-xs">
        <div class="Hui-tabNav-wp">
            <ul id="min_title_list" class="acrossTab cl">
                <li class="active"><span title="我的桌面">我的桌面</span><em></em></li>
            </ul>
        </div>
        <div class="Hui-tabNav-more btn-group">
            <a id="js-tabNav-prev" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont"></i></a>
            <a id="js-tabNav-next" class="btn radius btn-default size-S" href="javascript:;"><i class="Hui-iconfont"></i></a>
        </div>
    </div>
    <div id="iframe_box" class="Hui-article">
        <div class="show_iframe">
            <div class="loading no-display"></div>
            <iframe scrolling="yes" frameborder="0" src="home.php"></iframe>
        </div>
    </div>
</section>

通过iframe标签中的 "src" 属性，可以设置首次登陆访问的默认页面。