开始，我们有了一系列的解决方案，我们将动手搭建新系统吧。
用户的体验已经需要越来越注重，这次我们是左右分栏，左边是系统菜单，右边是一个以tabs页组成的页面集合，每一个tab都可以单独刷新和关闭，因为他们会是一个iframe
工欲善其事必先利其器。需要用到以下工具。
Visual Studio 2012
您可以安装MVC4 for vs2010用VS2010来开发，但是貌似你将不能使用EF5.0将会是EF4.4版本，但这没有多大的关系。
MVC4将挂载在.NET Framework4.5上。
好！
打开我们熟悉的VS创建一个空解决方案。我起了个名字叫AppSolution，类库命名空间将与App开头，如App.BLL,App.Web等命名，喜欢酷一点的朋友你可以用的名字来命名
如Joy.BLL,Jason.BLL,zhangsan.BLL，随便你。直接是BLL也可以
我们将创建项目
1. MVC4.0的App.Admin 网站 Internet选项，选择Razor视图
![构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]..._第1张图片](http://img.e-com-net.com/image/info8/71153c24618c4c50803b675caf264ffc.png)
先下载Easyui1.3.2
最高版本是1.3.4我们选择1.3.2是因为1.3.2以上的是jquery 2.0
jquery2.0将不支持IE8.假如你已经抛弃IE8，那您可以体验更高的版本和更小更快的js库。（官方他是这样说的）
删掉不必要的东西，因为有些东西我们要了，有些保留，复制easyui到相应目录下，我喜欢把脚本和样式分开放。
- 1.把jquery.easyui.min.js放到scripts目录下
- 2.主题themes放到到content下 这里我只保留灰色和蓝色主题，其他主题我的审美有限度，大家可以到easyui官方下载新的主题
- 3.把Images文件夹移动到content下
- 4.Filters文件删掉
- 5.把素材和site.css放到content目录下，我已经为大家准备好这个项目所要用到的图片素材，不够我们再添加
- 6.把controllers的AccountController.cs,HomeController.cs删除
- 7.把View视图自带的cshtml删掉。
- 8.把script无关或者不是压缩的我都删掉了，因为我认为不必要调试。以后我们遇到问题，用其他工具来辅助调试，如httpAnalyes软件等
好了，我们开始搭建
还是新建一个“空”的控制器HomeController，添加index视图
index代码
Index
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/blue/css")
@Scripts.Render("~/bundles/home")
System Manage
MVC4+EF5.0+EasyUI
加载中...
这里我们看到head @Styles.Render("~/Content/css")这些代码，这是MVC4的捆版压缩技术，将css和javascript压缩输出到页面。我已经做好了所以大家只要看下就可以。也可以谷歌一下他的原理组成。博客园很多大虾也都给出了答案。其文件是App_Start下的BundleConfig.cs
$(function () {
$('#tab_menu-tabrefresh').click(function () {
/*重新设置该标签 */
var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
$(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src", url);
});
//在新窗口打开该标签
$('#tab_menu-openFrame').click(function () {
var url = $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe").attr("src");
window.open(url);
});
//关闭当前
$('#tab_menu-tabclose').click(function () {
var currtab_title = $('.tabs-selected .tabs-inner span').text();
$('#mainTab').tabs('close', currtab_title);
if ($(".tabs li").length == 0) {
//open menu
$(".layout-button-right").trigger("click");
}
});
//全部关闭
$('#tab_menu-tabcloseall').click(function () {
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
$('#mainTab').tabs('close', t);
}
});
//open menu
$(".layout-button-right").trigger("click");
});
//关闭除当前之外的TAB
$('#tab_menu-tabcloseother').click(function () {
var currtab_title = $('.tabs-selected .tabs-inner span').text();
$('.tabs-inner span').each(function (i, n) {
if ($(this).parent().next().is('.tabs-close')) {
var t = $(n).text();
if (t != currtab_title)
$('#mainTab').tabs('close', t);
}
});
});
//关闭当前右侧的TAB
$('#tab_menu-tabcloseright').click(function () {
var nextall = $('.tabs-selected').nextAll();
if (nextall.length == 0) {
$.messager.alert('提示', '前面没有了!', 'warning');
return false;
}
nextall.each(function (i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#mainTab').tabs('close', t);
}
});
return false;
});
//关闭当前左侧的TAB
$('#tab_menu-tabcloseleft').click(function () {
var prevall = $('.tabs-selected').prevAll();
if (prevall.length == 0) {
$.messager.alert('提示', '后面没有了!', 'warning');
return false;
}
prevall.each(function (i, n) {
if ($('a.tabs-close', $(n)).length > 0) {
var t = $('a:eq(0) span', $(n)).text();
$('#mainTab').tabs('close', t);
}
});
return false;
});
});
$(function () {
/*为选项卡绑定右键*/
$(".tabs li").live('contextmenu', function (e) {
/*选中当前触发事件的选项卡 */
var subtitle = $(this).text();
$('#mainTab').tabs('select', subtitle);
//显示快捷菜单
$('#tab_menu').menu('show', {
left: e.pageX,
top: e.pageY
});
return false;
});
});
function addTab(subtitle, url, icon) {
if (!$("#mainTab").tabs('exists', subtitle)) {
$("#mainTab").tabs('add', {
title: subtitle,
content: createFrame(url),
closable: true,
icon: icon
});
} else {
$("#mainTab").tabs('select', subtitle);
$("#tab_menu-tabrefresh").trigger("click");
}
$(".layout-button-left").trigger("click");
//tabClose();
}
function createFrame(url) {
var s = '';
return s;
}
$(function () {
$(".ui-skin-nav .li-skinitem span").click(function () {
var theme = $(this).attr("rel");
$.messager.confirm('提示', '切换皮肤将重新加载系统！', function (r) {
if (r) {
$.post("../../Home/SetThemes", { value: theme }, function (data) { window.location.reload(); }, "json");
}
});
});
});
index的脚本，这个home.js的脚本，他集成了tab页的右键菜单我已经集成到系统。运行之前要在Global.asax启用压缩
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
using System.Web.Mvc;
using System.Web.Optimization;
using System.Web.Routing;
namespace App.Admin
{
// 注意: 有关启用 IIS6 或 IIS7 经典模式的说明，
// 请访问 http://go.microsoft.com/?LinkId=9394801
public class MvcApplication : System.Web.HttpApplication
{
protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();
WebApiConfig.Register(GlobalConfiguration.Configuration);
FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
RouteConfig.RegisterRoutes(RouteTable.Routes);
//启用压缩
BundleTable.EnableOptimizations = true;
BundleConfig.RegisterBundles(BundleTable.Bundles);
AuthConfig.RegisterAuth();
}
}
}
在BundleConfig.RegisterBundles(BundleTable.Bundles);前面加入
//启用压缩
BundleTable.EnableOptimizations = true;
好，我们来看看效果！
![构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]..._第2张图片](http://img.e-com-net.com/image/info8/96274f41ef0e479e89bd223fef29fa02.jpg)
如果你要启用灰色主题那么在将@Styles.Render("~/Content/themes/blue/css")
修改为@Styles.Render("~/Content/themes/gray/css")即可
![构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]..._第3张图片](http://img.e-com-net.com/image/info8/36daadba053647a0b1f2d155224b63e5.jpg)
其实这一些没什么好说的，只是为系统搭建了一个简单的框架。如果用easyui没有不下几个小时也是很难搭建起来的，不过别担心，我为大家准备了原代码
代码下载 下载的源码有的同学运行有问题请把App_Start下的BundleConfig.cs更改为
using System.Web;
using System.Web.Optimization;
namespace App.Admin
{
public class BundleConfig
{
// 有关 Bundling 的详细信息，请访问 http://go.microsoft.com/fwlink/?LinkId=254725
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/common").Include(
"~/Scripts/common.js"));
bundles.Add(new ScriptBundle("~/bundles/home").Include(
"~/Scripts/home.js"));
bundles.Add(new ScriptBundle("~/bundles/account").Include(
"~/Scripts/Account.js"));
//easyui
bundles.Add(new StyleBundle("~/Content/themes/blue/css").Include("~/Content/themes/blue/easyui.css"));
bundles.Add(new StyleBundle("~/Content/themes/gray/css").Include("~/Content/themes/gray/easyui.css"));
bundles.Add(new StyleBundle("~/Content/themes/metro/css").Include("~/Content/themes/metro/easyui.css"));
bundles.Add(new ScriptBundle("~/bundles/jqueryfrom").Include(
"~/Scripts/jquery.form.js"));
bundles.Add(new ScriptBundle("~/bundles/easyuiplus").Include(
"~/Scripts/jquery.easyui.plus.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate.unobtrusive.plus.js"));
// 使用 Modernizr 的开发版本进行开发和了解信息。然后，当你做好
// 生产准备时，请使用 http://modernizr.com 上的生成工具来仅选择所需的测试。
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
}
}
}
1 html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, button, textarea, select, p, blockquote, th, td {margin: 0;padding: 0;} 2 html, body {height: 100%;width: 100%;} 3 body {font: 12px/1.33 "微软雅黑",Verdana,"宋体",Helvetica,sans-serif;background-color:#fff} 4 /*通用 5 ===============================================*/ 6 table {border-spacing: 0;} 7 .tablespacing {border-spacing: 3px;} 8 .clear{ clear:both} 9 fieldset, img {border: 0 none;} 10 li {list-style: none outside none;} 11 h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal;} 12 cite, em {font-style: normal;} 13 input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {cursor: pointer;} 14 input[type="text"],input[type="password"],textarea{border:1px solid #ccc} 15 input[type="text"],input[type="password"]{ padding:2px; height:16px;} 16 .clearfix:after {clear: both;content: ".";display: block;height: 0;visibility: hidden;} 17 label[disabled="true"], label[disabled=""], label[disabled="disabled"] {color: #000000;} 18 a:link, a:visited {text-decoration: none;} 19 a:hover {text-decoration:none;} 20 21 .displaynone{display:none} 22 .fl{ float:left} 23 .fr{ float:right} 24 header,footer,nav,section {display: block;} 25 .pd10{ padding:10px} 26 .pd3{ padding:3px} 27 .pd0{ padding:0px} 28 .pt5{ padding-top:5px} 29 .pt10{ padding-top:10px} 30 .pr5{ padding-right:5px} 31 .pr10{ padding-right:10px} 32 .pr20{ padding-right:20px} 33 .pb5{ padding-bottom:5px} 34 .pb10{ padding-bottom:10px} 35 .pl5{ padding-left:5px} 36 .pl10{ padding-left:10px} 37 .pl20{ padding-left:20px} 38 .mt2{ margin-top:2px} 39 .mb2{ margin-bottom:2px} 40 .mt5{ margin-top:5px} 41 .mb5{ margin-bottom:5px} 42 .mb-3{ margin-bottom:-3px} 43 .lh24{ line-height:24px} 44 .lh30{ line-height:30px} 45 46 .wid100f{width:100%}.wid80{ width:80px}.wid100{ width:100px}.wid120{ width:120px}.wid150{ width:150px}.wid590{ width:590px} 47 48 /*选择*/ 49 .SelLookUp{ background:url('Images/icon/lookup.png') no-repeat center; padding:8px 11px} 50 .ui-state-default .SelLookUp{ background-position:right; padding:2px 20px 2px 5px; color:#2B77BD; font-weight:normal} 51 52 /*所有按钮样式 53 ===============================================*/ 54 .mvctool 55 { 56 height:30px; 57 } 58 .searchText{float:left; margin:2px 5px 0 0} 59 60 .icon-reload{background:url(Images/tools.png) no-repeat 0px -180px;height:16px;padding-left:18px;display:inline-block} 61 .icon-search{background:url(Images/tools.png) no-repeat -1px -259px;height:16px;padding-left:18px;display:inline-block} 62 .icon-save{background:url(Images/tools.png) no-repeat 0px -137px;height:16px;height:16px;padding-left:18px;display:inline-block} 63 .icon-ok{background:url(Images/tools.png) no-repeat 0px -218px;height:16px;height:16px;padding-left:18px;display:inline-block} 64 .icon-remove{background:url(Images/tools.png) no-repeat 0px -30px;height:16px;height:16px;padding-left:18px;display:inline-block} 65 .icon-add{background:url(Images/tools.png) no-repeat 0px 0px;height:16px;padding-left:18px;display:inline-block} 66 .icon-edit{background:url(Images/tools.png) no-repeat 0px -62px;height:16px;height:16px;padding-left:18px;display:inline-block} 67 .icon-details{background:url(Images/tools.png) no-repeat 0px -97px;height:16px;height:16px;padding-left:18px;display:inline-block} 68 .icon-man{background:url(Images/icons.png) no-repeat 0px 0px;height:16px;padding-left:18px;} 69 .icon-return{background:url(Images/icons.png) no-repeat 0px -311px;height:16px;padding-left:18px;} 70 .icon-group{background:url(Images/icons.png) no-repeat 0px -42px;height:16px;padding-left:18px;} 71 .icon-key{background:url(Images/icons.png) no-repeat 0px -374px;height:16px;padding-left:18px;} 72 .icon-send{background:url(Images/icons.png) no-repeat 0px -293px;height:16px;padding-left:18px;} 73 .icon-show{background:url(Images/icons.png) no-repeat 0px -333px;height:16px;padding-left:18px;} 74 .icon-uncheck{background:url(Images/icons.png) no-repeat 0px -190px;height:16px;padding-left:18px;} 75 .icon-settings{background:url(Images/icons.png) no-repeat 0px -107px;height:16px;padding-left:18px;} 76 .icon-share{background:url(Images/icons.png) no-repeat 0px -128px;height:16px;padding-left:18px;} 77 .icon-flag{background:url(Images/icons.png) no-repeat 0px -148px;height:16px;padding-left:18px;} 78 .icon-clock{background:url(Images/icons.png) no-repeat 0px -169px;height:16px;padding-left:18px;} 79 .icon-close{background:url(Images/icons.png) no-repeat 0px -64px;height:16px;padding-left:18px;} 80 .icon-cancelclose{background:url(Images/icons.png) no-repeat 0px -87px;height:16px;padding-left:18px;} 81 .icon-check{background:url(Images/icons.png) no-repeat 0px -210px;height:16px;padding-left:18px;} 82 .icon-comment{background:url(Images/icons.png) no-repeat 0px -352px;height:16px;padding-left:18px;} 83 .icon-export{background:url(Images/icons.png) no-repeat 0px -230px;height:16px;padding-left:18px;} 84 .icon-female{background:url(Images/icons.png) no-repeat 0px -19px;height:16px;padding-left:18px;} 85 .icon-copy{background:url(Images/icons.png) no-repeat 0px -250px;height:16px;padding-left:18px;} 86 .icon-error{background:url(Images/icons.png) no-repeat 0px -271px;height:16px;padding-left:18px;} 87 88 select.select,select.select2{ height:22px; line-height:22px; border:1px solid #E1E1E1; color:#7A7A7A; background:#FAFAFA; vertical-align:middle; } 89 select.select{padding:1px;} 90 select.select2{padding:2px;} 91 input.normal{ width:255px; } 92 input.small{ width:95px;} 93 input.small2{ width:50px; } 94 input.small3{ width:130px; } 95 input.middle{ width:210px; } 96 .txtInput{ margin-right:5px; padding:0 3px 0 3px; height:22px; line-height:22px; background:#FAFAFA; border:1px solid #D7D7D7; vertical-align:middle; font-size:12px; font-family:'微软雅黑'; } 97 .txtInput2{ padding:0 3px 0 3px; height:20px; line-height:20px; background:#FAFAFA; border:1px solid #D7D7D7; vertical-align:middle; font-family:'微软雅黑'; } 98 .btnSubmit{ padding:0 10px; height:28px; line-height:28px; color:#3D80B3; font-weight:bold; border:1px solid #AED0EA; background:url(Images/btn_bg.gif) 0 -44px repeat-x; cursor:pointer; vertical-align:middle; overflow:hidden; } 99 .btnSubmit:hover{ background-position:0 -72px;} 100 .btnSearch{ padding:0 8px; height:24px; line-height:24px; color:#707070; border:1px solid #D7D7D7; background:url(Images/btn_bg.gif) repeat-x; cursor:pointer; vertical-align:middle; overflow:hidden; } 101 .btnSearch:hover{ background-position:0 -22px; color:#005eac; } 102 .btnSelect{ padding:0; border:1px #e1e1e1 solid; color:#707070; cursor:pointer; vertical-align:middle; overflow:hidden; background:url(Images/btn_bg.gif) repeat-x; } 103 .btnSelect:hover{ background-position:0 -22px; color:#005eac; } 104 .btnSelect span.add{ display:block; height:20px; line-height:20px; padding:1px 3px 1px 18px; white-space:nowrap; background:url(tools_icon.gif) 2px -27px no-repeat; } 105 .btnInput{ margin:auto; padding:0 5px; border:1px #e1e1e1 solid; color:#707070; background:url(Images/btn_bg.gif) repeat-x; cursor:pointer; vertical-align:middle; line-height:24px; height:22px; overflow:hidden; } 106 107 /*file容器样式*/ 108 a.files{ width:52px; height:22px; overflow:hidden; display:block; border:1px solid #d7d7d7; background:url(Images/upfile_bg.gif) left top no-repeat;text-decoration:none; } 109 /*file设为透明，并覆盖整个触发面*/ 110 a.files input{ margin-left:-270px; font-size:24px; cursor:pointer; filter:alpha(opacity=0); opacity:0; } 111 /*取消点击时的虚线框*/ 112 a.files, a.files input{ outline:none;/*ff*/hide-focus:expression(this.hideFocus=true);/*ie*/ } 113 .expic{cursor: pointer; width: 140px; height: 140px; border: 1px #ccc solid;} 114 .uploading{ float:left; background:url(Images/loading2.gif) no-repeat left center; padding-left:18px;display:none; line-height:24px; height:24px; color:#333; } 115 #FileUpload{ width:140px;} 116 /* Styles for validation helpers 117 -----------------------------------------------------------*/ 118 .field-validation-error{background:url(Images/icon-error.png) no-repeat 0px 0px;padding-left:18px; margin-bottom:-3px;color: #ff0000;} 119 .field-validation-valid{display: none;} 120 input.input-validation-error,select.input-validation-error{border: 1px solid #ff0000;background-color: #ffeeee;} 121 .validation-summary-errors{font-weight: bold;color: #ff0000;} 122 .validation-summary-valid{display: none;} 123 /*from*/ 124 /*easyui inherit*/ 125 .panel-body{ overflow:visible;} 126 /* Styles for editor and display helpers----------------------------------------------------------*/ 127 fieldset{width: 100%;margin-left: 4px;padding: 1em;border: 1px solid #CCC;} 128 legend{font-size: 1.1em;font-weight: 600;padding: 2px 4px 8px 4px;} 129 .search{width: 600px;float: left;} 130 /* Tabs样式 131 =========================================================*/ 132 .tab_nav{ margin:8px auto; height:23px; line-height:23px; border-bottom:1px #e1e1e1 solid; font-family:"微软雅黑"; } 133 .tab_nav li{ float:left; height:22px; margin:0 2px 0 5px; border:1px #e1e1e1 solid; border-bottom:0; background:url(Images/btn_bg.gif) repeat-x; text-align:center; } 134 .tab_nav li.selected,.tab_nav li.selected a:hover{ background:none; border-bottom:1px solid #fff; margin-bottom:-1px; _border-top:1px; } 135 .tab_nav li a:link,.tab_nav li a:visited,.tab_nav li a:active{ display:block; float:left; padding:0 10px; height:22px; color:#767676; outline:none; } 136 .tab_nav li a:hover{ background:url(Images/btn_bg.gif) repeat-x left -22px; } 137 .tab_nav li.selected a{ color:#3D80B3; } 138 .tab_con{ display:none; position:relative; } 139 /*表格样式 140 =============================================*/ 141 .msgtable,.form_table{ width:100%; border:1px solid #EDECFF; font-family:Verdana, Geneva, sans-serif; } 142 .msgtable th{ padding:0.5em; font-weight:700; background:url(tools_bg.gif) left -150px repeat-x; } 143 .msgtable td{ padding:0.4em; border-bottom:1px solid #F3F3F3; } 144 .msgtable .tr_odd_bg{ background:#F9F9F9; } 145 .msgtable .tr_hover_col{ background:#EAEAEA; } 146 147 .form_table th{padding:5px 8px 5px 0;color:#333;text-align:right;} 148 .form_table td{padding:6px 0 5px 10px;text-align:left;color:#717171;line-height:200%} 149 .form_table label{ margin-left:10px; padding:7px 0 0; font-family:"宋体"; } 150 .form_table label.attr{color:#1d1d1d} 151 .form_table label input{ margin-right:5px; vertical-align:middle;} 152 .form_table span label{ margin:0; padding:0; } 153 .form_table textarea{font-size:12px;padding:3px;color:#000;border:1px #d2d2d2 solid;vertical-align:middle; font-family:"微软雅黑";} 154 .form_table textarea.small{ width:350px; height:75px;} 155 .form_table textarea.big{ width:500px; height:350px;} 156 .form_table img.operator{ width:12px; height:12px; margin:0 6px; cursor:pointer; vertical-align:bottom; } 157 .setinput355 input,.setinput355 textarea{ width:355px; } 158 .setinput255 input,.setinput255 textarea{ width:255px; } 159 .setinput95 input,.setinput95 textarea{ width:95px;} 160 .setinput50 input,.setinput50 textarea{ width:50px; } 161 .setinput130 input,.setinput130 textarea{ width:130px; } 162 .setinput210 input,.setinput210 textarea{ width:210px; } 163 164 .border_table{ border-width:1px; margin:0; background:#fff; } 165 .border_table th{ border:1px solid #e1e1e1; vertical-align:middle; padding:0px 10px; white-space:nowrap; word-break:keep-all; } 166 .border_table td{ border:1px solid #e1e1e1; vertical-align:middle; padding:5px 10px 5px; white-space:nowrap; word-break:keep-all; } 167 .border_table thead th{ color:#333;white-space:nowrap;text-align:center;background:url(tools_bg.gif) repeat-x left -150px; } 168 .border_table tbody th{padding-right:5px; text-align:right;color:#707070;background-color:#f9f9f9} 169 .border_table .spec_pic{margin-bottom:5px} 170 .border_table label{color:#777} 171 .border_table tr.td_c td{text-align:center} 172 173 .select-any{ padding:10px} 174 .select-any li{ float:left; display:inline-block; height:22px; line-height:22px; padding-right:15px; white-space:nowrap} 175 176 .top_pic_shadow{position:relative; float:left; height: 158px; width:130px; margin-top:3px; background:#eee;} 177 .top_pic{ position:absolute; background:#fff; left:-3px; top:-3px; border:1px solid #ced7e7; padding:4px 4px 0; height: 158px; width:120px; text-align:center; overflow:hidden} 178 .top_pic:hover{ border:1px solid #ffbd67} 179 .top_pic img{ cursor:pointer; width:120px; height:120px} 180 .top_pic div{ color:#666} 181 182 .sizetable input{width: 40px; height:20px; line-height: 20px;} 183 .sizetable{ background:#ddd} 184 .sizetable tr td{ background:#fff; padding:2px} 185 .sizetable tr td.lf{ text-align:right; width:50px; background:#f0f0f0; color:#666} 186 187 188 textarea{ padding:2px;} 189 .fromEditTable{ width:100%; } 190 .fromEditTable td{ height:30px; padding-left:5px; border-bottom:dashed 1px #ccc} 191 .setTextWidth300 input[type="text"]{width:300px;} 192 .setTextWidth300 textarea{width:300px; margin:5px 0 5px 0;} 193 .setTextWidth200 input[type="text"]{width:200px;} 194 .setTextWidth200 textarea{width:200px; margin:5px 0 5px 0;} 195 .setTextWidth100 input[type="text"]{width:100px;} 196 .setTextWidth100 textarea{width:100px; margin:5px 0 5px 0;} 197 .setTextWidth80 input[type="text"]{width:80px;} 198 .setTextWidth80 textarea{width:80px; margin:5px 0 5px 0;} 199 #ErrMesList{ display:none; } 200 #ErrMesListContent{padding-left:10px;min-width:200px; line-height:22px;} 201 #ErrMesListContent ul li{list-style:disc} 202 203 /*themes*/ 204 .ui-skin-nav {float: left;padding: 0;list-style: none outside none;} 205 .ui-skin-nav .li-skinitem {float: left;font-size: 12px;margin-left: 5px;text-align: center;} 206 .ui-skin-nav .li-skinitem span {cursor: pointer;width:12px;height:10px;display:inline-block;border:1px solid #fff;} 207 .ui-skin-nav .li-skinitem span.cs-skin-on{border: 1px solid #FFFFFF;} 208 .ui-skin-nav .li-skinitem span.gray{background-color:gray;} 209 .ui-skin-nav .li-skinitem span.blue{background-color:blue;} 210 .ui-skin-nav .li-skinitem span.pepper-grinder{background-color:#BC3604;} 211 .ui-skin-nav .li-skinitem span.cupertino{background-color:#D7EBF9;} 212 .ui-skin-nav .li-skinitem span.dark-hive{background-color:black;} 213 .ui-skin-nav .li-skinitem span.sunny{background-color:#FDD140;} 214 215 216 /* 即时消息 */ 217 .webim-logo{color:#1e5dda} 218 .webim-logo img{ vertical-align:middle} 219 .icon-webim{ background:url(WebIM/css/images/webimlogo.gif) no-repeat left 0; height:20px; width:20px;} 220 221 .webim-lfbox{ float:left; width:546px; border-right:1px solid #ddd} 222 .webim-rtbox{ float:right;width:158px; padding:0 10px} 223 224 .webim-info-tit{ line-height:30px; overflow:hidden; padding:0 10px} 225 .webim-info-tit h2{ float:left; font-size:12px; padding-right:20px} 226 .webim-info-tit-name{ float:left; width:450px; padding-top:5px; line-height:0} 227 .webim-info-tit-name li{ display:inline-block; margin-right:5px; margin-bottom:5px; line-height:20px; padding-right:2px; border:1px solid #77b8de; background:#cbebfb; border-radius:4px;} 228 .webim-info-tit-name li a{ display:inline-block;} 229 .webim-info-tit-name li a.webim-info-tit-thename{ padding:0 2px} 230 .webim-info-tit-name li a img{ vertical-align:middle; padding-right:2px} 231 a.webim-info-tit-name-close{ background:url(WebIM/css/images/webim-02.gif) no-repeat; display:inline-block; padding-top:1px; width:7px; height:7px; cursor:pointer;} 232 .webim-info-tit-name li:hover{background:#ebf9ff;} 233 .webim-info-tit-name li:hover a{ color:#ff6600} 234 .webim-info-tit-name li.current{ border:1px solid #c6ad56; background:#fffadb;} 235 .webim-info-tit-name li.current a,.webim-info-tit-name li.current a:visited,.webim-info-tit-name li.current a:hover{ color:#e98e18} 236 .webim-info-tit-name li.current a.webim-info-tit-name-close{ background:url(WebIM/css/images/webim-02b.gif) no-repeat;} 237 .webim-info-tit-name li.current:hover a.webim-info-tit-name-close{ background:url(WebIM/css/images/webim-02.gif) no-repeat;} 238 239 .webim-info-contentbox{ background:#fff; padding:10px;} 240 .webim-info-content p{ padding-bottom:10px} 241 .webim-info-content .tit{ color:#666; padding-bottom:0} 242 243 .webim-send-about{ height:22px; line-height:22px; padding:0 10px} 244 .webim-send-about .fl a{ padding-right:10px} 245 .webim-send-about .fr a{ padding-left:10px} 246 .webim-send-butbox{ height:36px; line-height:36px; padding:0 10px} 247 .webim-send-butbox p{ float:left; width:460px; display:table; height:36px} 248 .webim-send-butbox p span.inter{ display:table-cell; vertical-align:middle; line-height:18px} 249 .webim-send-butbox p span.inter-ps{ text-overflow:ellipsis; overflow:hidden} 250 span.inter-ps span{ display:inline-block; padding-right:5px} 251 .webim-send-but{ float:right; background:url(WebIM/css/images/webim-09.gif) no-repeat; width:63px; height:26px; margin-top:5px; border:none; cursor:pointer} 252 253 .webim-person{ margin:5px 0 5px 0;} 254 .webim-list-tab{ margin-bottom:5px; overflow:hidden} 255 .webim-list-tab li{ float:left; height:20px; line-height:20px; border-bottom:2px solid #fff; padding:0 5px} 256 .webim-list-tab li.current{border:2px solid #fff; border-bottom:none; font-weight:bold} 257 .webim-org-search{ padding-bottom:5px} 258 .webim-org-search input[type="text"]{ width:132px; height:16px; line-height:16px; border:1px solid #a6d2e8; background:#fff} 259 .webim-org-search input[type="button"]{ background:url(WebIM/css/images/webim-04.gif) no-repeat; width:37px; height:20px; line-height:20px; vertical-align:top; border:none; cursor:pointer} 260 .webim-latest ul li{ background:url(WebIM/css/images/webim-01.gif) no-repeat 0 2px; padding-left:20px; padding-bottom:5px} 261 262 .psselect-lf,.psselect-rt{ float:left; width:160px; height:350px; padding:10px; border:1px solid #C5DBEC} 263 .psselect-lf .webim-list-tab li{ float:left; height:20px; line-height:20px; border-bottom:1px solid #c6dbef; padding:0 5px} 264 .psselect-lf .webim-list-tab li.current{border:1px solid #c6dbef; border-bottom:none; font-weight:bold} 265 266 .psselect-rt{ float:right; line-height:22px;} 267 .psselect-md{ float:left; width:30px; height:350px; line-height:350px; text-align:center; font-family:"宋体"} 268 269 .memberlist{ background:#f3f3f3; border:1px solid #ccc; height:300px; overflow:auto} 270 /* 信息系统样式 */ 271 .article-content{ background:#edf6ff; border:1px solid #a5cbe7; border-radius:5px; padding:10px; margin-bottom:10px; overflow:hidden; width:100%} 272 .article-content tr td{ vertical-align:top} 273 .article-content .lf{ width:150px; color:#999; line-height:18px} 274 .comment-tit{ background:#D3EBF8; border:1px solid #A5CBE7; border-bottom:none; border-radius:5px 5px 0 0; height:24px; line-height:24px; text-indent:10px} 275 .comment-content{ border:1px solid #a5cbe7; border-radius:0 0 5px 5px; padding:10px; margin-bottom:10px} 276 .comment-content .mymes{ border-bottom:1px dashed #ddd; padding:10px 0} 277 .mytitle{ padding-bottom:5px; color:#999} 278 .mytitle span{ color:#ab7100} 279 .mycomment{ text-indent:24px} 280 #comment-txt-input{ margin-bottom:5px} 281 .infolist-icon{ padding:2px 2px 2px 17px; background:url(/Content/images/icon/text.png) no-repeat;} 282 283 .thefile-tit{ font:normal 18px/36px Microsoft YaHei; text-align:center} 284 .thefile-about{ border-bottom:1px dashed #cecfce; text-align:center; color:#999} 285 .thefile-about span{ padding:0 10px} 286 .thefile-compress{ padding:10px 0; line-height:18px} 287 .fabu-tit{ background:#D3EBF8; border-bottom:1px solid #90C1DD; padding:10px; margin-bottom:5px; font-size:14px; font-weight:bold; color:#296d9c} 288 /*导航按钮*/ 289 .arrow-first,.arrow-pre,.arrow-next,.arrow-last{ background:url(/Content/Images/arrow.gif) no-repeat; display:inline-block; height:16px; width:16px; cursor:pointer; vertical-align:middle} 290 .arrow-first{ background-position:-7px 0} 291 .arrow-pre{ background-position:-35px 0} 292 .arrow-next{ background-position:-63px 0} 293 .arrow-last{ background-position:-91px 0} 294 .but-row a,.but-row a:visited{ border:1px solid #B4C1C9; border-radius:5px; display:inline-block; height:16px; line-height:16px; padding:2px 4px; margin-left:5px} 295 .but-row a:hover{ border:1px solid #4994de; background:#eff7ff} 296 .but-row a.but-disabled,.but-row a.but-disabled:visited,.but-row a.but-disabled:hover{ color:#bdd3e7; background:none; border:1px solid #B4C1C9; cursor:default} 297 .but-row a.but-disabled span{ opacity:0.35; cursor:default} 298 /* 页码样式 */ 299 .pages-box{ clear:both; border:2px solid #ddd; border-top:1px solid #ddd; overflow:hidden; height:100%; width:100%} 300 .pages-box tr td{ padding:15px 10px} 301 .pages .item{padding:1px 0;} /*数字页索引样式*/ 302 .pages .cpb {color:#ff6600; font-weight:bold; padding: 1px 6px;} /*当前页样式*/ 303 .pages a { text-decoration:none;padding: 2px 6px; margin:0 1px; border: 1px solid #ddd;} 304 .pages a:hover { background-color: #ff8800; color:#fff; border:1px solid #ff8800; text-decoration:none;font-weight:normal;} 305 .pages input{ width:40px; border:1px solid #c1d2e2; text-align:center; padding:2px}
关于代码：代码没有上传整个解决方案，你下载解压后，只需要引用现有类库即可，关于里面的素材，不懂的可以问我，里面包含里以后所有要用到的素材，请关注系统的童鞋不要删除，可以修改
下一讲预告：漂亮的登录页面