index.html抽离css代码
bobi1234
parent
89e3c536ac
commit
8c81457534
213
css/okadmin.css
213
css/okadmin.css
|
|
@ -1,158 +1,91 @@
|
||||||
/*@charset "utf-8";*/
|
/*==============================================主要就是index.html页面美化代码==============================================*/
|
||||||
/*@import "../lib/layui/css/layui.css";*/
|
/*顶部导航菜单logo样式*/
|
||||||
/*@import "//at.alicdn.com/t/font_693759_zroiq6woob6gvi.css";*/
|
.layui-layout-admin .layui-logo {
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px
|
||||||
|
}
|
||||||
|
|
||||||
/*!*顶部导航菜单logo样式*!*/
|
|
||||||
/*.layui-layout-admin .layui-logo {*/
|
|
||||||
/*color: #fff;*/
|
|
||||||
/*font-size: 20px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*!*顶部导航文字菜单样式*!*/
|
/*顶部导航文字菜单样式*/
|
||||||
/*.layui-nav {*/
|
.layui-nav {
|
||||||
/*padding: 0;*/
|
padding: 0
|
||||||
/*}*/
|
}
|
||||||
|
|
||||||
/*!*顶部菜单左边部分菜单样式*!*/
|
|
||||||
/*.layui-layout-left {*/
|
|
||||||
/*left: 235px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*!*第一个tan选项卡隐藏取消图标*!*/
|
/*顶部菜单左边部分菜单样式*/
|
||||||
/*.layui-tab-title li:first-child .layui-tab-close {*/
|
.layui-layout-left {
|
||||||
/*display: none;*/
|
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;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*!*主体内容样式*!*/
|
/*第一个tan选项卡隐藏取消图标*/
|
||||||
/*.content-body {*/
|
.layui-tab-title li:first-child .layui-tab-close {
|
||||||
/*position: absolute;*/
|
display: none
|
||||||
/*top: 46px;*/
|
}
|
||||||
/*right: 0px;*/
|
|
||||||
/*bottom: 42px;*/
|
|
||||||
/*left: 200px;*/
|
|
||||||
/*z-index: 1;*/
|
|
||||||
/*overflow: hidden;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*!*主体内容选项卡内容样式*!*/
|
|
||||||
/*.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 {*/
|
.menu-switch {
|
||||||
/*height: 100%;*/
|
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 {*/
|
.content-body .layui-tab-content {
|
||||||
/*position: relative;*/
|
position: absolute;
|
||||||
/*line-height: 39px;*/
|
top: 50px;
|
||||||
/*height: 41px;*/
|
bottom: 0;
|
||||||
/*border-bottom: 1px solid rgb(229, 229, 229);*/
|
width: 100%;
|
||||||
/*}*/
|
padding: 0;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
/*!*子页面面包屑导航刷新按钮*!*/
|
|
||||||
/*.ok-body-breadcrumb .layui-btn {*/
|
|
||||||
/*line-height: 2.4em;*/
|
|
||||||
/*margin-top: 3px;*/
|
|
||||||
/*float: right*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*!*子页面面包屑导航刷新按钮图标*!*/
|
/*使iframe高度100%,它的父类高度也需要100%*/
|
||||||
/*.ok-body-breadcrumb .layui-btn .layui-icon {*/
|
.content-body .layui-tab-content .layui-tab-item {
|
||||||
/*line-height: 40px;*/
|
height: 100%
|
||||||
/*}*/
|
}
|
||||||
|
|
||||||
/*!**/
|
|
||||||
/*.ok-search {*/
|
|
||||||
/*text-align: center;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*.ok-search input.layui-input {*/
|
/*使iframe高度100*/
|
||||||
/*width: 190px;*/
|
.content-body .layui-tab-content .layui-tab-item iframe {
|
||||||
/*}*!*/
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
/*!*美化滚动条代码*!*/
|
|
||||||
/*::-webkit-scrollbar {*/
|
|
||||||
/*width: 10px;*/
|
|
||||||
/*height: 10px;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
/*::-webkit-scrollbar-button:vertical {*/
|
/*响应式代码控制*/
|
||||||
/*display: none;*/
|
@media screen and (max-width:768px) {
|
||||||
/*}*/
|
.layui-layout-admin .layui-bg-black {
|
||||||
|
left: -200px
|
||||||
/*::-webkit-scrollbar-track:vertical {*/
|
}
|
||||||
/*background-color: black;*/
|
.layui-layout-admin .content-body {
|
||||||
/*}*/
|
left: 0
|
||||||
|
}
|
||||||
/*::-webkit-scrollbar-track-piece {*/
|
.layui-layout-admin .layui-footer {
|
||||||
/*background-color: #F5F5F5;*/
|
left: 0
|
||||||
/*}*/
|
}
|
||||||
|
.layui-layout-left {
|
||||||
/*::-webkit-scrollbar-thumb:vertical {*/
|
display: none
|
||||||
/*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;*/
|
|
||||||
/*}*/
|
|
||||||
/*}*/
|
|
||||||
|
|
|
||||||
29
index.html
29
index.html
|
|
@ -8,35 +8,8 @@
|
||||||
<meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
<meta name="description" content="ok-admin v1.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
|
||||||
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
|
<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="lib/layui/css/layui.css">
|
||||||
|
<link rel="stylesheet" href="css/okadmin.css">
|
||||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_693759_zroiq6woob6gvi.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>
|
</head>
|
||||||
<body class="layui-layout-body">
|
<body class="layui-layout-body">
|
||||||
<div class="layui-layout layui-layout-admin">
|
<div class="layui-layout layui-layout-admin">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue