ASP.NET MVC5 + EF6 + LayUI实战教程，通用后台管理系统框架（3） - 好文

前言

本节将我们自己的CSS样式替换系统自带的

开始搭建

将脚本文件夹删掉，将内容文件夹里的内容删掉，将我们自己的CSS样式文件，全部复制到内容里边

新建家庭控制器

给家庭控制器添加索引视图

指数代码

1 @ { Layout = null ; } 2 3 4 5 <！DOCTYPE html > <html> <head> < meta
charset = “utf-8” > <title> BYCMS 后台管理系统</ title > < meta name = “renderer”
content = “webkit” > < meta http - equiv = “ X-UA兼容“ content = ”IE =
edge，chrome =1“ > < meta http - equiv = ”Access-Control-Allow-Origin“ content =
”*“ 6 7 8 9 10 11 12 13 “viewport” content = “width =
device-width，initial-scale =1，maximum-scale = 1” > < meta name =
“apple-mobile-web-app-status-bar-style” content = “black” > < meta name =
“apple-mobile-web-app-capable” content = “yes” > < meta name =
“format-detection” content = “telephone = no” > < link rel = “icon” href =
“〜/内容/ images / favicon.ico“ >< link rel = “stylesheet” 14 15 16 17 18
href = “〜/ Content / css / index.css” media = “all” /> < link rel =
“stylesheet” href = “〜/ Content / layui / css / layui.css” media = “all” /> <
link rel = “stylesheet” href = “〜/ Content / css / index.css” media = “all” />
< / head> 19 20 21 22 <body class =“main_body”> 23 <div class
=“layui-layout layui-layout-admin”> 24 <！ - 顶部 - > 25 <div class
=“layui-header header”> 26 <div class =“layui-main mag0”> 27 <a href="#" class=
"logo"> BYCMS </ a > <！ - 显示/隐藏菜单- > < a href = “javascript：;” class = “seraph
hideMenu icon-caidan” > </ a > <！ - 顶级菜单- > < ulclass = “layui-nav
mobileTopLevelMenus” mobile > < liclass = “layui-nav-item” data - menu =
“contentManagement” > < a href = “javascript：;” 28 29 30 31 32 33 “seraph
icon-caidan” > </ i > < cite > layuiCMS < / cite> </ a > < dlclass =
“layui-nav-child” > < ddclass = “layui-this” data - menu = “contentManagement “
> < a href = ”javascript：;“ > < iclass = “layui-icon” data - icon = “＆＃xe63c;”
>＆＃xe63c; </ i> <cite> 34 35 36 = “memberCenter” > < a href = “javascript：;”
> < iclass = “seraph icon-icon10” data - icon = “icon-icon10” > </ i > < cite
>用户中心</ cite > </ a > </ dd > < dd data - menu = “systemeSttings “ > < a href =
”javascript：;“ > < iclass = “layui-icon” data - icon = “＆＃xe620;” >＆ 37
＃xe620; </ i> <cite>系统设置</ cite> </a> </ dd> < dd data - menu = “seraphApi” > <
a href = “javascript：;” > < iclass = “layui-icon” data - icon = “＆＃xe705;”
>＆＃xe705; </ i> <cite>使用文档</ cite> </a> </ dd> < / dl> 38 39 40 </ li > < /
ul> 41 42 <ul class =“layui-nav topLevelMenus”pc> 43 <li class
=“layui-nav-item layui-this”data-menu =“contentManagement”> 44 <a href="
javascript:;"> <i class =“layui-icon”data-icon =“＆＃xe63c;”>＆＃xe63c; </ i > <
cite >内容管理</ cite > </ a > < / li> 45 46 <li class =“layui-nav-item”data-menu
=“memberCenter”pc> 47 <a href="javascript:;"> <i class =“seraph
icon-icon10”data-icon =“icon-icon10”> </ i > < cite >用户中心</ cite > </ a > < /
li > 48 49 <li class =“layui-nav-item”data-menu =“systemeSttings”pc> 50 <a
href="javascript:;"> <i class =“layui-icon”data-icon =“＆＃xe620;”>＆＃xe620; </ i
> < cite >系统设置</ cite > </ a > < / li> 51 52 <li class
=“layui-nav-item”data-menu =“seraphApi”pc> 53 <a href="javascript:;"> <i class
=“layui-icon”data-icon =“＆＃xe705;”>＆＃xe705; </ i > < cite >使用文档</ cite > </ a >
< / li> 54 55 </ ul > <！ - 顶部右侧菜单- > < ul class = “layui-nav top_menu” > < li
class = “layui-nav-item” pc > < a href = “javascript：;” class = “clearCache” >
< iclass = “layui-icon” data - icon = “＆＃xe640;” >＆＃xe640; </ i> <cite>清除缓存</
cite> <spanclass =“layui-badge-dot”> </ span> </a> < 56 57 58 59 60 61 <li
class =“layui-nav-item lockcms”pc> 62 <a href="javascript:;"> <i class
=“seraph icon-lock”> </ i > < cite >锁屏</ cite > </ a > < / li> 63 64 <li class
=“layui-nav-item”id =“userInfo”> 65 <a href="javascript:;"> <IMG SRC = “〜/ 内容/
图像/ 面。JPG ”类= “ layui - NAV - IMG userAvatar ”宽度=“35 ”HEIGHT =“ 35 ”> <引用类= “
adminName ”>许伯一博客</ cite> </a> 66 <dl class =“ layui - nav - child ”> 67 <DD>
<a href=" 的javascript :; “data-url=" 页/ 用户/ 用户信息的html ">。 <I类=” 撒拉弗图标- ziliao
“数据图标=” 图标- ziliao “> </ i>的<举>个人资料</举> </A> </ DD> 68 <DD> <a href="
的javascript :; “data-url=" 页/ 用户/ changePwd HTML ">。 <I类=” 撒拉弗图标- xiugai
“数据图标=” 图标- xiugai “> </ i>的<举>修改密码</举> </A> </ DD> 69 <DD> <a href="
的javascript :; “class=" showNotice "> <I类=” layui - 图标“>＆＃xe645; </
i>的<引用>系统公告</举> <跨度类=” layui - badge - dot “> </ span> </a> </ dd> 70 <DD PC>
<a href=" 的javascript :; “class=" functionSetting "> <I类=” layui - 图标“>＆＃xe620;
</ i>的<举>功能设定</举> <跨度类=“ layui - badge - dot ”> </ span> </a> </ dd> 71 <DD
PC> <a href=" 的javascript :; “class=" changeSkin "> <I类=” layui - 图标“>＆＃xe61b;
</ i>的<举>更换皮肤</举> </A> </ DD> 72 <DD> <a href=" 页/ 登录/ 登录的html “class=" signOut
">。 <I类=” 撒拉弗图标- 一家推出“> </ i>的<举>退出</举> </A> < / DD> 73 </ DL> 74 </ LI> 75
</ UL> 76 </ DIV> 77 </ DIV> 78 <！ - 左侧导航 - > 79 <div class =“ layui - side
layui - bg - black ”> 80 <div class =“ user - photo ”> 81 <a class=" IMG
“title=" 我的头像"> <IMG SRC =” 〜/内容/ 图像/ 面。JPG “类=” userAvatar “> </A> 82
<p>你好！<spanclass =“ userName ”>许伯一博客</ span>，欢迎登录</ p> 83 </ DIV> 84 <！ - 搜索
- > 85 <div class =“ layui - form component ”> 86 <select name =“ search ”id
=“ search ”lay-search lay-filter =“ searchPage ”> 87 <option value
=“”>搜索页面或功能</ option> 88 <option value =“ 1 ”>图层</ option> 89 <option value =“
2 ”>表格</ option> 90 </选择> 91 <i class =“ layui - icon ”>＆＃xe615; </ i> 92 </
DIV> 93 <div class =“ navBar layui - side - scroll ”id =“ navBar ”> 94 <ul
class =“ layui - nav layui - nav - tree ”> 95 <li class =“ layui - nav - item
layui -this ”> 96 <a href=" 的javascript :; “data-url=" 页/ 主HTML ">。 <I类=”
layui - 图标“数据图标=”  “></ i>的<举>后台首页</举> </A> 97 </ LI> 98 </ UL> 99 </ DIV>
100 </ DIV> 101 <！ - 右侧内容 - > 102 <div class =“ layui - body layui - form ”> 103
<divclass =“ layui - tab mag0 ”lay-filter =“ bodyTab ”id =“ top_tabs_box ”> 104
<ulclass =“ layui - tab - title top_tab ”id =“ top_tabs ”> 105 <li class =“
layui -this ”lay-id =“”> <i class =“ layui - icon ”>＆＃xe68e; </ i> <cite>后台首页</
cite> </ li>106 </ UL> 107 <ul class =“ layui - nav closeBox ”> 108 <li class
=“ layui - nav - item ”>109 <a href=" 的javascript :; "> <I类= “ layui - 图标caozuo
”>＆＃xe643; </ i>的页面操作</A>110 <dl class =“ layui - nav - child ”> 111 <DD> <a
href=" 的javascript :; “class=" 刷新refreshThis "> <I类=” layui - 图标“>＆＃x1002; </
i>的刷新当前</A> </ DD> 112 <DD> <a href=" 的javascript :; “class=" closePageOther ">
<I类=” 撒拉弗图标- 禁止“> </ i>的关闭其他</A> </ DD> 113 <DD> <a href=" 的javascript :;
“class=" closePageAll "> <I类=” 撒拉弗图标- guanbi “> </ i>的关闭全部</A> </ DD> 114 </ DL>
115 </ LI> 116 </ UL> 117 <div class =“ layui - tab - content clildFrame ”> 118
<divclass =“ layui - tab - item layui - show ”> 119 你好，世界 120 </ DIV> 121 </
DIV>122 </ DIV> 123 </ DIV> 124 <！ - 底部 - > 125 <div class =“ layui - footer
footer ”>126 <P> <跨度>版权@@ 2018许伯一博客</跨度> <a onclick=" 捐赠()“class=" layui-BTN
layui-BTN- 危险layui-BTN-SM">捐赠作者</一> </ p> 127 </ DIV> 128 </ DIV> 129 <！ - 移动导航
- >130 <div class =“ site - tree - mobile ”> <i class =“ layui - icon
”>＆＃xe602; </ i> </ div>131 <div class =“ site - mobile - shade ”> </ div> 132
<脚本类型= “ 文本/ JavaScript的”SRC =“ 〜/内容/ layui / layui 。JS ”> </ SCRIPT>133 <脚本类型=
“ 文本/ JavaScript的”SRC =“ 〜/内容/ JS / 索引。JS ”> </ SCRIPT>134 <脚本类型= “ 文本/
JavaScript的”SRC =“ 〜/内容/ JS / 高速缓存。JS ”> </ SCRIPT>135 </ BODY> 136 </ HTML>

初步效果

终于见到点东西了，Hello World终于问世了。

为了照顾零基础的朋友，每一步都有截图，算是详细的图文教程了，往后再有同样的步骤，就不再单步截图了，就要捡重点讲解了

热门工具换一换