构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统（2）-easyui构建前端页面框架[附源码]

开始，我们有了一系列的解决方案，我们将动手搭建新系统吧。

用户的体验已经需要越来越注重，这次我们是左右分栏，左边是系统菜单，右边是一个以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视图

　　

先下载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代码

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <meta name="viewport" content="width=device-width" />
     <script src="@Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
     <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
     @Styles.Render("~/Content/css")
     @Styles.Render("~/Content/themes/blue/css")
     @Scripts.Render("~/bundles/home")
</head>
<body class="easyui-layout">
    <div id="OverTimeLogin"  class="easyui-dialog" data-options="closed:true,modal:true">
        <iframe width="726px" scrolling="no" height="497px" frameborder="0"  id="iOverTimeLogin"></iframe>
    </div>
    <div data-options="region:'north',border:false,split:true" style="height: 60px;">
        <div class="define-head">
            <div class="define-logo">
               <div id="LoginTopLine">System Manage</div>
                <div id="LoginBotoomLine">MVC4+EF5.0+EasyUI</div>
            </div>
            <div class="define-account">
                   
            </div>
        </div>
    </div>
    <div data-options="region:'west',split:true,title:'菜单列表'" style=" 200px; height:100%; padding-top: 2px; background-color:#fff; overflow:auto">
        <div id="RightTree" style=" background-color:#fff;">
            <div class="panel-loading">加载中...</div>
        </div>
    </div>
    <div data-options="region:'south',border:false" style="height: 20px;">
        <div class="define-bottom">
            

        </div>
    </div>
    <div data-options="region:'center',border:false">
        <div id="mainTab" class="easyui-tabs" data-options="fit:true">
            <div title="我的桌面" data-options="closable:true" style="overflow: hidden; background:#fff">
                <iframe scrolling="auto" frameborder="0" src="" style=" 100%; height: 100%;"></iframe>
            </div>
        </div>
    </div>
    <div id="tab_menu" class="easyui-menu" style=" 150px;">
        <div id="tab_menu-tabrefresh" data-options="iconCls:'icon-reload'">
            刷新</div>
        <div id="tab_menu-openFrame">
           在新的窗体打开</div>
        <div id="tab_menu-tabcloseall">
            关闭所有</div>
        <div id="tab_menu-tabcloseother">
            关闭其他标签页</div>
        <div class="menu-sep">
        </div>
        <div id="tab_menu-tabcloseright">
           关闭右边</div>
        <div id="tab_menu-tabcloseleft">
           关闭左边</div>
        <div id="tab_menu-tabclose" data-options="iconCls:'icon-remove'">
          关闭</div>
        <div id="menu" class="easyui-menu" style=" 150px;">
        </div>
    </div>
</body>
</html>

　　

这里我们看到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 = '<iframe frameborder="0" src="' + url + '" scrolling="auto" style="100%; height:99%"></iframe>';
    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;
好，我们来看看效果！

如果你要启用灰色主题那么在将@Styles.Render("~/Content/themes/blue/css")

修改为@Styles.Render("~/Content/themes/gray/css")即可

其实这一些没什么好说的，只是为系统搭建了一个简单的框架。如果用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}
Site.css

关于代码：代码没有上传整个解决方案，你下载解压后，只需要引用现有类库即可，关于里面的素材，不懂的可以问我，里面包含里以后所有要用到的素材，请关注系统的童鞋不要删除，可以修改

下一讲预告：漂亮的登录页面

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/zhangjunwei87/p/4669878.html