使用jquery.layout.js构建页眉/页脚/左侧导航/中间展示内容的网页结构

背景：

　　快速将一个页面分成几个部分，在导航和页眉的位置放置公用的元素。

准备：

　　jquery.layout.js

首先，向页面中引入如下js文件和css文件，代码：

 <link href="~/Resource/Css/Site.css" rel="stylesheet" />
 <link href="~/Resource/Script/jquery.layout/jquery.layout.css" rel="stylesheet" />
 <script src="~/Resource/Script/jquery.js"></script>
 <script src="~/Resource/Script/jquery.layout/jquery.layout.js"></script>

然后，在指定的视图页面中，添加如下四个div元素，注意各div元素的class。

      <div class="ui-layout-north" style="padding-left:20px;padding-top:10px;height:38px;background-color:#C00">
             北山北
         </div>
     <div class="ui-layout-south">南山南</div>
     <div class="ui-layout-west">西山西</div>
     <div class="ui-layout-center">
         中间有谷堆
     </div>

最后添加如下JS代码：

     $(function () {
         $("body").layout();
     })

编译并运行，效果图如下：

只是截取了网页的一部分。