标签：
布局容器有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" 属性，可以设置首次登陆访问的默认页面。
标签：
原文地址：http://www.cnblogs.com/abay/p/5899501.html
