MVC+EasyUI+三层新闻网站建立(五 主页布局)

首先建立Home控制器,然后再建立Index视图。

和前面登录页面一样也需要引入几个文件。

接着就是找到你下载的easyui文件夹里面的demo里面的layout里面的full 浏览器运行后右键查看代码把里面的body里面的代码复制到Index视图的body里面去。没找到的可以直接复制下面的代码。

<body class="easyui-layout">
    <div data-options="region:‘north‘,border:false" style="height:60px;background:#B3DFDA;padding:10px">north region</div>
    <div data-options="region:‘west‘,split:true,title:‘West‘" style="width:150px;padding:10px;">west content</div>
    <div data-options="region:‘east‘,split:true,collapsed:true,title:‘East‘" style="width:100px;padding:10px;">east region</div>
    <div data-options="region:‘south‘,border:false" style="height:50px;background:#A9FACD;padding:10px;">south region</div>
    <div data-options="region:‘center‘,title:‘Center‘"></div>
</body>

运行代码就可以得到效果了

一般是不要最右边的div的所以可以在删掉最右边的div。

页面的上部布局就是根据你所做的放入一张背景图片就可以了。这里我没有找到合适的图片就不放图片了。

页面的右边导航菜单区使用手风琴布局格式。用下面的代码替换掉

 <div data-options="region:‘west‘,split:true,title:‘West‘" style="width:150px;padding:10px;">west content</div>
    <div data-options="region:‘west‘,split:true,title:‘West‘" style="width:150px;padding:0px;">
        <div class="easyui-accordion" style="width:auto;height:auto;">

            <div title="新闻管理" data-options="iconCls:‘icon-ok‘" style="overflow:auto;padding:10px;">
                <a href="javascript:void(0)" class="detailLink123" url="/AdminNewInfo/Index">新闻管理</a>
            </div>

            <div title="评论管理" data-options="iconCls:‘icon-ok‘" style="overflow:auto;padding:10px;">
                <a href="javascript:void(0)" class="detailLink123" url="/CommentInfo/Index">评论管理</a>
            </div>

        </div>

    </div>

页面的底部就是一些版权设置。所以这里就不需要多写了。

下一节讲 tab

时间: 2024-11-05 16:10:20

MVC+EasyUI+三层新闻网站建立(五 主页布局)的相关文章

MVC+EasyUI+三层新闻网站建立(二后台登录界面的搭建)

首先我们在Controllers里面新添加一个控制器就叫LoginController,右键点击Controllers添加控制器就可以了(注意后面一定是Controller结尾,这是一种约定) 其次:右键点击index建立Index视图.(不选择使用母版页) 现在我们就可以在Index视图中设计我们的登录页面了. 这里需要我们引入几个Css样式和JS文件 简单的进行登录界面的布局 <html> <head> <meta name="viewport" co

ASP.NET MVC +EasyUI 权限设计(二)环境搭建

请注明转载地址:http://www.cnblogs.com/arhat 今天突然发现博客园出问题了,老魏使用了PC,手机,平板都访问博客园了,都是不能正常的访问,原因是不能加载CSS,也就是不能访问common.cnblogs.com这个域名,一直出现"Aborted",非常的郁闷. 页面就是这样子的,不知道为什么,难道是不是我的3个终端有问题吧,还是园子的服务器有问题呢?还是路由器的问题呢?到现在这个问题还没解决,郁闷死了!弄得心情非常的不爽. 好吧,不在说这个问题了,开始我们的正

基于MVC+EasyUI的Web开发框架经验总结(4)--使用图表控件Highcharts

在我们做各种应用的时候,我们可能都会使用到图表统计,以前接触过一些不同的图表控件,在无意中发现了图表控件Highcharts,其强大的功能和丰富的互动效果,令人难以忘怀.本篇主要介绍在Web开发中使用图表控件Highcharts,以及对其进行统一汉化等操作,让我们的程序功能更加丰富,内容更加美观. 1.Highcharts基础介绍 Highcharts是一个非常流行,界面美观的纯Javascript图表库.它主要包括两个部分:Highcharts和Highstock.Highcharts可以为您

基于MVC+EasyUI的Web开发框架经验总结(16)--使用云打印控件C-Lodop打印页面或套打报关运单信息

在最新的MVC+EasyUI的Web开发框架里面,我整合了关于网购运单处理的一个模块,其中整合了客户导单.运单合并.到货扫描.扣仓.出仓.查询等各个模块的操作,里面涉及到一些运单套打的操作,不过由于之前介绍LODOP不兼容Chrome等浏览器,因此曾经想放弃这个控件的打印处理,不过他们及时推出了"云打印控件C-Lodop",而且对之前的接口几乎完全兼容,因此在框架里也继续沿用了这个控件来进行相关的打印处理,包括常规的打印和运单信息套打等处理. 1.控件的安装 这个云控件C-Lodop(

MVC和三层架构的比较

以前涉及到.NET做项目,脑袋里面只有一个概念,那就是三层,最近学习了一种新的架构思想,那就是ASP.NET MVC+EF+EasyUI,我们的项目已经进行了一半了,对这个架构算是有了初步的认识.这篇博文主要是笔者对MVC和三层架构的一些理解. MVC设计模式  VS  三层架构 一.概念不同 三层架构是一个分层式的软件体系架构设计,它可适用于任何一个项目. MVC是一个设计模式,它是根据项目的具体需求来决定是否适用于该项目. 那么两者有什么不同呢? 首先,当我们接手一个项目时,要设计软件的架构

从MVC和三层架构说到SSH整合开发

相信很多人都认同JavaWeb开发是遵从MVC开发模式的,遵从三层架构进行开发的,是的,大家都这么认同.但是相信大家都会有过这样一个疑问,if(MVC三层模式==三层架构思想)out.println(“请继续观看……”) 1.MVC(MODEL-VIEW-CONTROLLER)设计模式: 首先让我们了解下MVC(Model-View-Controller)的概念: MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写

对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识

对Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架的个人认识   初次接触Spring.Net+NHibenate+Asp.Net Mvc+Easyui框架,查阅了相关资料,了解了框架如何使用,以及优缺点,下面的说法可能比较浅显,后续的可能在开发过程中能了解的更深刻一些.说的不对的地方请及时指正. 首先,拿到这个框架的时候,第一个想问的问题是为什么想用这块框架,有什么好处,通过查资料浅显的理解为:为了实现应用的松耦合,通过配置完成对数据业务逻辑的处理,节省开发时

从MVC和三层架构说到ssh整合开发-上

相信很多人都认同JavaWeb开发是遵从MVC开发模式的,遵从三层架构进行开发的,是的,大家都这么认同.但是相信大家都会有过这样一个疑问,if(MVC三层模式==三层架构思想)out.println("请继续观看--") 1.MVC(Model-View-Controller)设计模式: 首先让我们了解下MVC(Model-View-Controller)的概念: MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controlle

MVC + WCF + 三层架构中model的困惑

最近做一个项目有个地方比较就纠结,项目使用WCF做数据库服务,MVC5架构,三层架构(BLL,Model,DAL也就是调用WCF服务),这三者间传递数据基本是以对象为单位 如果User,但BLL调用WCF中model,和三层架构中model,还有MVC中的model,该怎么分配比较好呢,是mvc中建立model且在三层中建立model,还是三个中都只建立一个model.但mvc中显示的model不一定是bll中的model,可能只是其中的几个字段.如果分别都建立一个model,那我从BLL中传递