前言
本节将我们自己的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 > <！ - 顶级菜单- > < ul class = “layui-nav mobileTopLevelMenus” mobile > < li class = “layui-nav-item” data - menu = “contentManagement” > < a href = “javascript：;” 28 29 30 31 32 33 “seraph icon-caidan” > </ i > < cite > layuiCMS < / cite> </ a > < dl class = “layui-nav-child” > < dd class = “layui-this” data - menu = “contentManagement “ > < a href = ”javascript：;“ > < i class = “layui-icon” data - icon = “＆＃xe63c;” >＆＃xe63c; </ i> <cite> 34 35 36 = “memberCenter” > < a href = “javascript：;” > < i class = “seraph icon-icon10” data - icon = “icon-icon10” > </ i > < cite >用户中心</ cite > </ a > </ dd > < dd data - menu = “systemeSttings “ > < a href = ”javascript：;“ > < i class = “layui-icon” data - icon = “＆＃xe620;” >＆ 37 ＃xe620; </ i> <cite>系统设置</ cite> </a> </ dd> < dd data - menu = “seraphApi” > < a href = “javascript：;” > < i class = “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” > < i class = “layui-icon” data - icon = “＆＃xe640;” >＆＃xe640; </ i> <cite>清除缓存</ cite> <span class =“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>你好！<span class =“ 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 <div class =“ layui - tab mag0 ”lay-filter =“ bodyTab ”id =“ top_tabs_box ”> 104 <ul class =“ 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 <div class =“ 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终于问世了。
为了照顾零基础的朋友，每一步都有截图，算是详细的图文教程了，往后再有同样的步骤，就不再单步截图了，就要捡重点讲解了