root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

index.html抽离css代码

v1.0
bobi1234 2018-07-17 10:13:09 +08:00
parent 89e3c536ac
commit 8c81457534
2 changed files with 74 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
css/okadmin.css
View File

@ -1,158 +1,91 @@
/*@charset "utf-8";*/
/*@import "../lib/layui/css/layui.css";*/
/*@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css";*/
/*==============================================主要就是index.html页面美化代码==============================================*/
/*顶部导航菜单logo样式*/
.layui-layout-admin .layui-logo {
color: #fff;
font-size: 20px
}
/*!*顶部导航菜单logo样式*!*/
/*.layui-layout-admin .layui-logo {*/
/*color: #fff;*/
/*font-size: 20px;*/
/*}*/
/*!*顶部导航文字菜单样式*!*/
/*.layui-nav {*/
/*padding: 0;*/
/*}*/
/*顶部导航文字菜单样式*/
.layui-nav {
padding: 0
}
/*!*顶部菜单左边部分菜单样式*!*/
/*.layui-layout-left {*/
/*left: 235px;*/
/*}*/
/*!*第一个tan选项卡隐藏取消图标*!*/
/*.layui-tab-title li:first-child .layui-tab-close {*/
/*display: none;*/
/*}*/
/*顶部菜单左边部分菜单样式*/
.layui-layout-left {
left: 235px
}
/*!*隐藏/显示左边菜单按钮样式*!*/
/*.menu-switch {*/
/*width: 30px;*/
/*height: 30px;*/
/*position: relative;*/
/*left: 200px;*/
/*top: 18px;*/
/*color: #fff;*/
/*background-color: #1AA094;*/
/*text-align: center;*/
/*line-height: 30px;*/
/*cursor: pointer;*/
/*}*/
/*!*主体内容样式*!*/
/*.content-body {*/
/*position: absolute;*/
/*top: 46px;*/
/*right: 0px;*/
/*bottom: 42px;*/
/*left: 200px;*/
/*z-index: 1;*/
/*overflow: hidden;*/
/*}*/
/*第一个tan选项卡隐藏取消图标*/
.layui-tab-title li:first-child .layui-tab-close {
display: none
}
/*!*主体内容选项卡内容样式*!*/
/*.content-body .layui-tab-content {*/
/*position: absolute;*/
/*top: 50px;*/
/*bottom: 0px;*/
/*width: 100%;*/
/*padding: 0px;*/
/*overflow: hidden;*/
/*}*/
/*!*使iframe高度100%,它的父类高度也需要100%*!*/
/*.content-body .layui-tab-content .layui-tab-item {*/
/*height: 100%;*/
/*}*/
/*隐藏/显示左边菜单按钮样式*/
.menu-switch {
width: 30px;
height: 30px;
position: relative;
left: 200px;
top: 18px;
color: #fff;
background-color: #1AA094;
text-align: center;
line-height: 30px;
cursor: pointer
}
/*!*使iframe高度100*!*/
/*.content-body .layui-tab-content .layui-tab-item iframe {*/
/*height: 100%;*/
/*}*/
/*主体内容样式*/
.content-body {
position: absolute;
top: 46px;
right: 0;
bottom: 42px;
left: 200px;
z-index: 1;
overflow: hidden
}
/*!*子页面(user.html、article.html等)的主体内容*!*/
/*.ok-body {*/
/*padding: 10px;*/
/*}*/
/*!*子页面面包屑导航样式*!*/
/*.ok-body-breadcrumb {*/
/*position: relative;*/
/*line-height: 39px;*/
/*height: 41px;*/
/*border-bottom: 1px solid rgb(229, 229, 229);*/
/*}*/
/*主体内容选项卡内容样式*/
.content-body .layui-tab-content {
position: absolute;
top: 50px;
bottom: 0;
width: 100%;
padding: 0;
overflow: hidden
}
/*!*子页面面包屑导航刷新按钮*!*/
/*.ok-body-breadcrumb .layui-btn {*/
/*line-height: 2.4em;*/
/*margin-top: 3px;*/
/*float: right*/
/*}*/
/*!*子页面面包屑导航刷新按钮图标*!*/
/*.ok-body-breadcrumb .layui-btn .layui-icon {*/
/*line-height: 40px;*/
/*}*/
/*使iframe高度100%,它的父类高度也需要100%*/
.content-body .layui-tab-content .layui-tab-item {
height: 100%
}
/*!**/
/*.ok-search {*/
/*text-align: center;*/
/*}*/
/*.ok-search input.layui-input {*/
/*width: 190px;*/
/*}*!*/
/*使iframe高度100*/
.content-body .layui-tab-content .layui-tab-item iframe {
height: 100%
}
/*!*美化滚动条代码*!*/
/*::-webkit-scrollbar {*/
/*width: 10px;*/
/*height: 10px;*/
/*}*/
/*::-webkit-scrollbar-button:vertical {*/
/*display: none;*/
/*}*/
/*::-webkit-scrollbar-track:vertical {*/
/*background-color: black;*/
/*}*/
/*::-webkit-scrollbar-track-piece {*/
/*background-color: #F5F5F5;*/
/*}*/
/*::-webkit-scrollbar-thumb:vertical {*/
/*margin-right: 10px;*/
/*background-color: #A6A6A6;*/
/*}*/
/*::-webkit-scrollbar-thumb:vertical:hover {*/
/*background-color: #aaa;*/
/*}*/
/*::-webkit-scrollbar-corner:vertical {*/
/*background-color: #535353;*/
/*}*/
/*::-webkit-scrollbar-resizer:vertical {*/
/*background-color: #FF6E00;*/
/*}*/
/*!*响应式代码控制*!*/
/*@media screen and (max-width: 768px) {*/
/*.layui-layout-admin .layui-bg-black {*/
/*left: -200px;*/
/*}*/
/*.layui-layout-admin .content-body {*/
/*left: 0;*/
/*}*/
/*.layui-layout-admin .layui-footer {*/
/*left: 0;*/
/*}*/
/*.layui-layout-left {*/
/*display: none;*/
/*}*/
/*}*/
/*响应式代码控制*/
@media screen and (max-width:768px) {
.layui-layout-admin .layui-bg-black {
left: -200px
}
.layui-layout-admin .content-body {
left: 0
}
.layui-layout-admin .layui-footer {
left: 0
}
.layui-layout-left {
display: none
}
}

29
index.html
View File

@ -8,35 +8,8 @@
<meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="lib/layui/css/layui.css">
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css">
<style>
/*顶部导航菜单logo样式*/
.layui-layout-admin .layui-logo{color:#fff;font-size:20px}
/*顶部导航文字菜单样式*/
.layui-nav{padding:0}
/*顶部菜单左边部分菜单样式*/
.layui-layout-left{left:235px}
/*第一个tan选项卡隐藏取消图标*/
.layui-tab-title li:first-child .layui-tab-close{display:none}
/*隐藏/显示左边菜单按钮样式*/
.menu-switch{width:30px;height:30px;position:relative;left:200px;top:18px;color:#fff;background-color:#1AA094;text-align:center;line-height:30px;cursor:pointer}
/*主体内容样式*/
.content-body{position:absolute;top:46px;right:0;bottom:42px;left:200px;z-index:1;overflow:hidden}
/*主体内容选项卡内容样式*/
.content-body .layui-tab-content{position:absolute;top:50px;bottom:0;width:100%;padding:0;overflow:hidden}
/*使iframe高度100%,它的父类高度也需要100%*/
.content-body .layui-tab-content .layui-tab-item{height:100%}
/*使iframe高度100*/
.content-body .layui-tab-content .layui-tab-item iframe{height:100%}
/*响应式代码控制*/
@media screen and (max-width:768px){
.layui-layout-admin .layui-bg-black{left:-200px}
.layui-layout-admin .content-body{left:0}
.layui-layout-admin .layui-footer{left:0}
.layui-layout-left{display:none}
}
</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">