前言：
十分感謝博客園園友們對上一篇文章的關注和支持！lz將繼續努力回報大家。
正題：
IDE呢，我用的是Visual Studio2013，感覺用著不錯！推薦下，2013具體有哪些新的特性大家可以去微軟官方了解下，這里就不多說啦。
第一步：創建空白解決方案；
第二步：添加MVC4的網站（命名大家按照自己喜好來），選擇Internet選項，Razor視圖；
第三步：干掉一些用不著的文件，比如View自帶的一些視圖；
第四步：在Controllers下創建一個空的控制器AccountController，并且在View/Account下添加Index視圖文件，代碼如下：
1 @{ 2 Layout = null; 3 } 4 5 <!DOCTYPE html> 6 7 <html> 8 <head> 9 <title>用戶登錄</title> 10 <meta name="viewport" content="width=device-width" /> 11 @Scrjavascript"> 20 $(function () { 21 $("#LoginSys").click(function () { 22 LoginSys(); 23 }); 24 $("#ClearInput").click(function () { 25 ClearInput(); 26 }); 27 $("#UserName").keydown(function (e) { 28 var curkey = e.which; 29 if (curkey == 13) { 30 LoginSys(); 31 return false; 32 } 33 }); 34 $("#PassWord").keydown(function (e) { 35 var curkey = e.which; 36 if (curkey == 13) { 37 LoginSys(); 38 return false; 39 } 40 }); 41 }); 42 43 //登錄驗證 44 function LoginSys() { 45 if ($.trim($("#UserName").val()) == "") { 46 tipShow("登錄提醒", "用戶名不能為空，請輸入您的用戶名！", 2000); 47 $("#UserName").focus(); 48 return; 49 } 50 if ($.trim($("#Password").val()) == "") { 51 tipShow("登錄提醒", "用戶密碼不能為空，請輸入您的密碼！", 2000); 52 $("#Password").focus(); 53 return; 54 } 55 $('input').attr("disabled", "disabled"); 56 tipShow("登錄提醒", "登陸成功！系統正在加載，請稍等...", 10000); 57 return false; 58 } 59 60 //重置輸入 61 function ClearInput() { 62 $("input").val(""); 63 } 64 </script> 65 </head> 66 <body> 67 <div id="loginmain"> 68 <div id="logintop"> 69 </div> 70 <div id="loginbox"> 71 <form id="loginform" class="form-vertical"> 72 <div class="control-group normal_text"> 73 <h3><img src="/Content/Images/Login/logo.png" alt="Logo" /></h3> 74 </div> 75 <div class="control-group"> 76 <div class="controls"> 77 <div class="main_input_box"> 78 <span class="add-on bg_lg"><i class="icon-user"></i></span><input id="UserName" type="text" placeholder="用戶名" /> 79 </div> 80 </div> 81 </div> 82 <div class="control-group"> 83 <div class="controls"> 84 <div class="main_input_box"> 85 <span class="add-on bg_ly"><i class="icon-lock"></i></span><input id="Password" type="password" placeholder="密碼" /> 86 </div> 87 </div> 88 </div> 89 <div class="form-actions"> 90 <span class="pull-left"><a id="ClearInput" href="Javascript:void(0)" class="flip-link btn btn-info">重 置</a></span> 91 <span class="pull-right"><a id="LoginSys" href="javascript:void(0)" class="btn btn-success">登 錄</a></span> 92 </div> 93 </form> 94 </div> 95 <div id="loginbottom"> 96 Copyright 2014 IT8090. 97 </div> 98 </div> 99 </body>100 </html>View Code其中@Scripts.Render("~/Scripts/jquery")等請參考：http://www.49028c.com/chenru1988/archive/2013/01/31/2886805.html
別忘了在Global.asax啟用壓縮，代碼如下：
1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.Http; 6 using System.Web.Mvc; 7 using System.Web.Optimization; 8 using System.Web.Routing; 9 10 namespace PM.Web11 {12 // 注意: 有關啟用 IIS6 或 IIS7 經典模式的說明，13 // 請訪問 http://go.microsoft.com/?LinkId=939480114 15 public class Mvcapplication : System.Web.HttpApplication16 {17 PRotected void Application_Start()18 {19 AreaRegistration.RegisterAllAreas();20 21 WebApiConfig.Register(GlobalConfiguration.Configuration);22 FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);23 RouteConfig.RegisterRoutes(RouteTable.Routes);24 25 //啟用壓縮26 BundleTable.EnableOptimizations = true;27 BundleConfig.RegisterBundles(BundleTable.Bundles);28 AuthConfig.RegisterAuth();29 }30 }31 }View Code采用bootstrap設計簡介：
本系統登錄界面采用bootstrap前端工具包和Jquery插件來設計的，整體風格為Metro風格（挺喜歡），下面介紹下bootstrap（大牛請繞行）
1,bootstrap科普
Bootstrap是Twitter推出的一個開源的用于前端開發的工具包。是一個CSS/HTML框架。Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一直是GitHub上的熱門開源項目。
Bootstrap是基于jQuery框架開發的，它在jQuery框架的基礎上進行了更為個性化和人性化的完善，形成一套自己獨有的網站風格，并兼容大部分jQuery插件。
Bootstrap中包含了豐富的Web組件，根據這些組件，可以快速的搭建一個漂亮、功能完備的網站。其中包括以下組件：
下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、面包屑、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等
Bootstrap自帶了13個jQuery插件，這些插件為Bootstrap中的組件賦予了“生命”。其中包括：
模式對話框、標簽頁、滾動條、彈出框等。
可以對Bootstrap中所有的CSS變量進行修改，依據自己的需求裁剪代碼
Less 是一個 CSS 預處理器，讓 CSS 具有動態性。另一方面，Bootstrap 是一個快速開發 Web App 和站點的工具包。這樣，可以在 CSS 中使用 Bootstrap 的 Less 變量、mixins（混合）和 nesting（嵌套）。
2,下載bootstrap：http://getbootstrap.com/2.3.2/
3, bootstrap集成步驟：https://github.com/seyhunak/twitter-bootstrap-rails
4, 本頁面上還用到啦jquery plugin：gritter. Demo:http://boedesign.com/demos/gritter/
效果圖：
1, 整體效果，還沒設計完成，左邊應該弄點什么呢？請大家幫忙出出主意啦！
2, 提示效果圖展示，當然，真正的用戶登錄驗證還沒實現：
PS：登錄頁面還沒用到EasyUI.
準備：
EasyUI搭建前端框
新聞熱點
疑難解答
