整体结构

  1. 页面声明
  2. 首页title
  3. 登录信息
  4. 顶部导航
  5. 二级菜单
  6. tab
  7. 首页JS配置项
<!DOCTYPE HTML>
<html>
 <head>
  <title> HTC 管理系统</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <link href="assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
   <link href="assets/css/bui-min.css" rel="stylesheet" type="text/css" />
   <link href="assets/css/main.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <div class="header">
    <div class="dl-title"><span class="">前端框架</span></div>
    <div class="dl-log">欢迎您,<span class="dl-log-user">XXX</span>
        <a href="###" title="退出系统" class="dl-log-quit">[退出]</a>
    </div>
   </div>
   <div class="content">
    <div class="dl-main-nav">
      <ul id="J_Nav"  class="nav-list ks-clear">
        <li class="nav-item dl-selected"><div class="nav-item-inner nav-storage">首页</div></li>
        <li class="nav-item"><div class="nav-item-inner nav-inventory">搜索页</div></li>
      </ul>
    </div>
    <ul id="J_NavContent" class="dl-tab-conten">

    </ul>
      
   </div>
  <script type="text/javascript" src="assets/js/jquery-1.8.1.min.js"></script>
  <script type="text/javascript" src="assets/js/bui-min.js"></script>
  <script type="text/javascript" src="assets/js/config-min.js"></script>
  <script>
     BUI.use('common/main',function(){
      var config = [{
          id:'menu',
          menu:[{
              text:'首页内容',
              items:[
                {id:'main-menu',text:'顶部导航',href:'main/menu.php'},
                {id:'second-menu',text:'二级菜单',href:'main/second-menu.php'}
              ]
            }]
          },{
            id:'search',
            menu:[{
                text:'搜索页面',
                items:[
                  {id:'introduce',text:'搜索页面简介',href:'search/introduce.html'}
                ]
              }]
          }];
      new PageUtil.MainPage({
        modulesConfig : config
      });
    });

  </script>
 </body>
</html>

         

几点说明

  1. 文档声明为 <!doctype html>,文件格式是utf-8
  2. css文件在 title中引入,js在页面底部引入
  3. 页面引入的 prettify.js和prettify.css仅是为了展示代码使用