easyUI做静态页面

    最近师姐找我做一个ITOO静态的门户。当时的第一感觉就是应该会很简单，所以也没有着急。等到开始做的时候发现和想象中的好像又有些距离，首先就是如何打开文件登录到门户页面，按照做牛腩新闻发布系统的经验是打开.aspx 文件即可，然后文件里面的都尝试了一下，发先找不到自己的页面。后来才知道自己没有找对地方，因为登录的是门户，所以我们需要运行的也是门户界面，这样我完成了第一步，就是在系统里面找到找到自己需要的页面。下面开始了对于门户的制作。

 

第一步：我们需要的界面的样式：是仿照今目标做出来的UI

 第二步：去EasyUI的布局模块中寻找自己的信息，学习，并且运用。

需要首先介绍一下我们用到的东西layout：layout是一个容器,它有5个区域：north(北丐)，south(南帝)，east(东邪)，west(西毒)；center(中神通)，像不像金庸的天龙八部，中间区域的panel是必须的，周边区域panel是可选项，所有周边区域的panel可以改变大小通过拖动边框，他们也可以折叠(collapse)通过点击触发折叠事件，布局可以嵌套，因此用户可以创建你想要的复杂布局。

下来看看easyUI给我们提供的门户样式实例：

实例一：进行东西分块

 

实例二：先是南北分，再是东西分

实例三：结合上面两个实例有深入一层，南北中分三块，中间的又进行东西中分三块

这三个实例和今目标的实例进行对比就会发现很像，但是还有需要整合的部分，现在我们需要做的就是做出实际的例子。这里就出现问题了，怎么实现今目标中的在西边的那块在分三块，这个我尝试了一下，没有实现，所以最后采用的是模块的形式，在大模块里面添加小的模块，代码如下：

<div data-options="region:'west',split:true,title:'基本信息'" style="width:200px;padding:10px;">

                               <div data-options="region:' north',split:true,title:'学生信息'" style="width:175px;height:170px;padding-top:10px;background-color:#fff9cb">

                                    <p>1.学生信息</p>

                                   <p></p>

                                   <p></p>

                                   <p></p>

                                   <p></p>

                                    

                        </div>

                            <div data-options="region:'south',split:true,title:'task'" style="width:200px;height:170px;padding-top:10px;">

                            <p style="background-color:#ecf9fb">2.任务</p>

                        </div>

                        </div>

效果图：

 中间的和右面的也是这样实现的，代码是：

<div data-options="region:'east'" style="width: 200px; padding: 10px">

                            <div data-options="region:' north'" style="width:175px;height:180px;padding-top:10px;background-color:#fff9cb;border:1px solid #ecf9fb">

                                    <p style=" text-align:center">公告</p>

                                   <p></p>

                                   <p></p>

                                   <p></p>

                                   <p></p>

                                    

                        </div>

                        </div>

                        <div data-options="region:'center'" style="padding: 10px">

                            

                            <section id="main">

                                @RenderBody()

                            </section>

                            <div data-options="region:' north',split:true,title:'任务'" style="width:500px;height:auto;padding-top:10px;padding-left :20px">

                            <p style="background-color:#ecf9fb; text-align:center">任务看板</p>

                        </div>

                        </div>

                   

总体的效果图：

    这是门户界面的一些基础的知识，我们只有把这块的知识熟悉然后总结，我们做东西时才会更顺手，基础知识掌握了，即使一些没有见过的页面也不会耗费太长的时间去整理，自己就能够做出来！