黑桃怎么用html代码,index.html

后台管理模版

/*顶部导航*/

.cms-admin .cms-header{height:62px;background:#23262E;border-bottom:3px solid #1AA094;z-index:1001}

.cms-admin .cms-header .cms-logo{height:62px;line-height:62px;text-align:center;color:#fff;font-size:26px;font-weight:600}

.cms-admin .cms-header .cms-logo img{display:block;width:160px;height:40px;margin:10px auto 0 auto}

.cms-admin .cms-header .cms-top{width:calc(100% - 205px);width:-moz-calc(100% - 205px);width:-webkit-calc(100% - 205px);height:62px;top:0;left:197px;margin:0;padding:0}

.cms-top .menu-switch{width:28px;height:32px;top:15px;left:10px;cursor:pointer;background:#1BB394;text-align:center;border-radius:2px}

.cms-top .menu-mobile{display:none;width:28px;height:32px;top:15px;left:6px;cursor:pointer;background:#1BB394;text-align:center;border-radius:2px}

.cms-top .menu-switch:hover{background:#5FB878;}

.cms-top .menu-mobile:hover{background:#5FB878;}

.cms-top .menu-switch i{display:block;width:28px;height:32px;line-height:32px;top:0;left:0;color:#fff;text-align:center}

.cms-top .menu-mobile i{display:block;width:28px;height:32px;line-height:32px;top:0;left:0;color:#fff;text-align:center}

.cms-top .cms-top-menu{height:62px;top:0;left:47px;padding-right:15px}

.cms-top ul.layui-nav{padding:0;background:#23262E}

.cms-top ul.layui-nav li.layui-nav-item{cursor:pointer}

/*hover start*/

.cms-top ul.layui-nav li.layui-nav-item:hover{background:#393D49}

.cms-top ul.layui-nav li.layui-this{background:#000;}

.cms-top ul.layui-nav li.layui-this:hover{background:#000;}

/*hover end*/

.cms-top ul.layui-nav li.layui-nav-item:last-child{margin-right:0}

.cms-top ul.layui-nav li.layui-nav-item a{display:inline-block;vertical-align:middle;height:62px;padding-left:10px!important;padding-right:10px!important;line-height:62px!important;color:#f5f5f5}

.cms-top ul.layui-nav li.layui-nav-item a i{display:inline-block;vertical-align:middle;margin-right:0;padding-right:4px!important}

.cms-top ul.layui-nav li.layui-nav-item a cite{display:inline-block;vertical-align:middle}

.cms-top ul.layui-nav li.layui-this:after{top:62px !important;height:3px !important;}

.cms-top ul.layui-nav span.layui-nav-bar{top:62px !important;height:2px;}

.cms-top ul.layui-nav:hover span.layui-nav-bar{top:62px !important}

.cms-top .cms-top-menu ul.layui-nav li.layui-nav-item a{padding-left:15px!important;padding-right:15px !important}

.cms-top .cms-top-menu ul.layui-nav li.layui-nav-item a i{font-size:20px;padding-right:2px !important}

/*右侧常用菜单*/

.cms-top .cms-offten-menu{height:62px;top:0;right:0;padding-right:0}

.cms-top .cms-offten-menu ul.layui-nav li.exit a{line-height:61.5px;padding-right:15px!important;padding-left:13px!important}

/*左侧导航*/

.cms-admin .cms-left{top:65px;left:0px;background:#393D49;border-right:3px solid #18BAAC;z-index:1001;}

.cms-admin .cms-left .layui-side-scroll{padding-left:0px;}

.layui-side-scroll .user-info{width:200px;height:auto;padding:15px 0px 8px 0px;}

.layui-side-scroll .user-info .photo{display:block;width:76px;height:76px;margin-left:50px;padding:0px;}

.layui-side-scroll .user-info .photo img{display:block;width:100%;height:100%;border-radius:50%;-webkit-border-radius:50%;border:4px solid #44576B;}

.layui-side-scroll .user-info p{display:block;width:100%;height:25px;color:#ffffff;line-height:25px;text-align:center;margin-top:15px;}

.layui-side-scroll a{cursor: pointer;}

.layui-side-scroll ul.layui-nav li.layui-nav-item dl.layui-nav-child dd a{display:inline-block;vertical-align:top;padding-left:40px !important;padding-right:0px;}

.layui-side-scroll ul.layui-nav li a i{display:inline-block;vertical-align:top;padding-right:5px;}

/*底部footer*/

.cms-admin .cms-footer{left:203px;background:#2F4056;font-size:12px;text-align:center;z-index:1001;}

.cms-admin .cms-footer .inline-block{text-align:center;color:#fff;line-height:44px;margin-right:15px;box-shadow:none}

.cms-admin .cms-footer .fp{color:#fff}

.cms-admin .cms-footer .fp:hover{color:#01AAED}

.cms-admin .cms-footer button{display:inline-block}

/*右侧body*/

.cms-admin .cms-body{top:65px;left:203px;z-index:1001}

.cms-body .cms-tab{margin:0px;width:100%;height:100%;border-left:1px solid #e2e2e2;background:#F1F2F7;overflow:hidden}

.cms-tab .cms-title-box{width:100%;height:40px;border-bottom:1px solid #1AA094}

.cms-tab .key-press{width:40px;height:40px;background:#FFF;cursor:pointer;color:#009688;text-align:center}

.cms-tab .key-press i{font-weight:700;color:#009688;font-size:20px;line-height:40px}

.cms-tab .key-press:hover{background:#f2f2f2}

.cms-tab .go-left{position:absolute;width:40px;top:0;left:0;z-index:1005;border-right:1px solid #E2E2E2 !important}

.cms-tab .go-left .key-press{position:absolute;top:0;left:0;z-index:1006;}

.cms-tab ul.cms-tab-title{border:none;padding:0;margin:0;height:40px;position:absolute;top:0;left:40px;background:#fafafa;z-index:1000;border-bottom:1px solid #1AA094;overflow-y:hidden;overflow:hidden}

.cms-tab ul.cms-tab-title li{background:#fafafa}

#admin-home{padding:0 12px}

.cms-tab ul.cms-tab-title li i.cms-icon{display:inline-block;vertical-align:top;padding-right:3px;line-height:40px}

.cms-tab ul.cms-tab-title li em{display:inline-block;vertical-align:top;line-height:40px}

.cms-tab ul.cms-tab-title li:hover{background:#f2f2f2}

.cms-tab ul.cms-tab-title .layui-this{background:#009688;color:#fff;height:40px}

.cms-tab ul.cms-tab-title .layui-this:after{border-radius:0;border-top:none}

.cms-tab ul.cms-tab-title .layui-this:hover{background:#009688}

.cms-tab .title-right{width:230px;height:40px;position:absolute;top:0;right:0;z-index:1005;background:#FFF;border-left:1px solid #E5E5E5}

.cms-tab .title-right .go-right{position:absolute;top:0;left:0}

.cms-tab .title-right .refresh{width:68px;position:absolute;top:0;left:41px;background:#5EB95E}

.cms-tab .title-right .refresh i{font-weight:400;font-size:15px;color:#fff}

.cms-tab .title-right .refresh cite{font-size:15px;line-height:40px;padding-left:3px;color:#fff}

.cms-tab .title-right .refresh:hover{background:#F7B824}

.cms-tab .title-right .often{width:125px;position:absolute;top:0;left:109px;background:#F1F2F7;cursor:pointer}

.cms-tab .title-right .often:hover{background:#f2f2f2;color:#333}

.cms-tab .title-right .often ul.layui-nav{display:block;width:120px;height:100%;border:none;margin:0;padding:0;background:none}

.cms-tab .title-right .often ul.layui-nav li.layui-nav-item{top:0px;left:0px;width:120px;height:100%;}

.cms-tab .title-right .often ul.layui-nav li.layui-nav-item a.top{display:inline-block;width:100%;height:100%;padding:0;margin:0;position:absolute;top:0;left:0;line-height:40px;text-align:center}

.often ul.layui-nav li.layui-nav-item a.top i{display:inline-block;width:30px;height:40px;line-height:40px;position:absolute;top:0;left:5px;color:#555}

.often ul.layui-nav li.layui-nav-item a.top:hover i{color:#FF784E}

.often ul.layui-nav li.layui-nav-item a.top cite{display:inline-block;width:65px;height:40px;line-height:40px;position:absolute;top:0;left:35px;text-align:left;color:#333}

.often ul.layui-nav li.layui-nav-item a.top:hover cite{color:#333}

.often ul.layui-nav li.layui-nav-item a.top .layui-nav-more{display:inline-block;font-size:16px;position:absolute;top:20px;left:98px;border-color:#393D49 transparent transparent}

.often ul.layui-nav li.layui-nav-item a.top:hover .layui-nav-more{position:absolute;top:14px;left:98px;border-color:transparent transparent #393D49}

.often ul.layui-nav li.layui-nav-item a.top .layui-nav-mored{position:absolute;top:9px !important;left:98px;border-color:transparent transparent #393D49}

.often ul.layui-nav .layui-nav-bar{display:none}

.often ul.layui-nav li.layui-nav-item dl.layui-nav-child{width:146px;text-align:center;position:absolute;top:42px;left:-30px;background:#fff}

.often ul.layui-nav li.layui-nav-item dl a{display:inline-block;vertical-align:top;color:#333;padding-left:0;padding-right:0;width:100%;text-align:center;line-height:40px}

.often ul.layui-nav li.layui-nav-item dl a i{display:inline-block;vertical-align:top;padding-right:3px;color:#333}

.often ul.layui-nav li.layui-nav-item dl a:hover{background:#5EB95E;color:#fff}

.often ul.layui-nav li.layui-nav-item dl a:hover i{color:#fff}

.often ul.layui-nav li.layui-nav-item dl dd.layui-this a{color:#fff}

.often ul.layui-nav li.layui-nav-item dl dd.layui-this a i{color:#fff}

.cms-tab .layui-tab-content{margin:0;padding:0;border:none;width:100%;height:100%;overflow:hidden}

.layui-tab-content .layui-tab-item{width:100%;height:100%;background:#fff;overflow:hidden}

.layui-tab-content .layui-tab-item iframe{width:100%;min-width:480px;border:0;height:100%;border:none!important;overflow-x:hidden!important}

.cms-body .green{width:60%;margin:0 auto;margin-top:160px;height:500px;line-height:500px;text-align:center;color:#fff;background:#FF5722}

/*锁屏css*/

#time{width:100%;color:#fff;font-size:60px;margin-bottom:80px;display:inline-block;text-align:center}

.lock-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:#F1F2F7 url("images/lockscreenbg.jpg") repeat fixed;background-size:cover;background-repeat:repeat;z-index:999999}

.lock-wrapper{margin:10% auto;max-width:400px}

.lock-box{background:rgba(255,255,255,.3);padding:20px;border-radius:3px;-webkit-border-radius:3px;position:relative;height:215px}

.lock-wrapper img{display:block;width:90px;height:90px;position:absolute;left:50%;top:-45px;margin-left:-45px;border-radius:50%;-webkit-border-radius:50%;border:5px solid #fff}

.lock-wrapper h1{display:block;width:100%;height:30px;line-height:30px;text-align:center;color:#fff;font-size:18px;text-transform:uppercase;padding:50px 0 0 0;margin-bottom:23px}

.lock-wrapper .lock-form{width:100%;height:105px}

.lock-wrapper .lock-form .layui-form-item{width:100%;height:50px;padding:0;margin:0;margin-bottom:15px}

.lock-wrapper .lock-form .layui-form-item input[type=password]{width:60%;height:40px;margin:0 auto;border:solid 1px #E2E2E4;cursor:auto;font-size:14px;user-select:text;text-rendering:auto;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none}

.lock-wrapper .lock-form .layui-form-item span.layui-btn{display:block;width:100px;text-align:center;margin:0 auto;line-height:40px;height:40px;color:#fff}

.lock-wrapper .lock-form .layui-form-item span.layui-btn:hover{background:#FE5722;color:#fff}

/* 后台界面主题配色解决方案 */

.Theme-cms{}

/*------------深蓝风主题A-------------*/

.Theme-A .cms-header{background:#1E9FFF}

.Theme-A .cms-top .menu-switch{background:#1BB394}

.Theme-A .cms-top .menu-switch:hover{background:#5FB878}

.Theme-A .cms-top ul.layui-nav{background:#1E9FFF}

.Theme-A .cms-top ul.layui-nav li.layui-nav-item:hover{background:#01AAED}

.Theme-A .cms-top ul.layui-nav li.layui-this{background:#008FBF}

.Theme-A .cms-top ul.layui-nav li.layui-this:hover{background:#008FBF}

.Theme-A .cms-left{border-right:3px solid #18BAAC;background:#2A2D31}

.Theme-A .cms-tab .key-press{background:#35A9FF;color:#FFF}

.Theme-A .cms-tab .key-press i{color:#FFF}

.Theme-A .cms-tab .go-left{border-right:1px solid #4BB2FF!important}

.Theme-A .cms-tab .go-left .key-press{border-right:1px solid #4BB2FF!important}

.Theme-A .cms-tab .title-right{background:#FFF;border-left:1px solid#4BB2FF}

.Theme-A .cms-tab .go-right{border-right:1px solid #aaa!important}

.Theme-A .cms-tab .go-left .key-press{border-right:1px solid #aaa!important}

.Theme-A .cms-tab .title-right .often{background:#FAFAFA}

/*------------墨绿主题B------------*/

.Theme-B .cms-header{background:#009688}

.Theme-B .cms-top .menu-switch{background:#1BB394}

.Theme-B .cms-top .menu-switch:hover{background:#5FB878}

.Theme-B .cms-top ul.layui-nav{background:#009688}

.Theme-B .cms-top ul.layui-nav li.layui-nav-item:hover{background:#1CA794}

.Theme-B .cms-top ul.layui-nav li.layui-this{background:#5FB878}

.Theme-B .cms-top ul.layui-nav li.layui-this:hover{background:#1CA794}

/*左侧导航*/

.Theme-B .cms-left{border-right:3px solid #18BAAC;background:#2A2D31}

/*------------墨绿主题C-------------*/

.Theme-C .cms-header{background:#2F4056}

.Theme-C .cms-top .menu-switch{background:#1BB394}

.Theme-C .cms-top .menu-switch:hover{background:#5FB878}

.Theme-C .cms-top ul.layui-nav{background:#2F4056}

.Theme-C .cms-top ul.layui-nav li.layui-nav-item:hover{background:#01AAED}

.Theme-C .cms-top ul.layui-nav li.layui-this{background:#008FBF}

.Theme-C .cms-top ul.layui-nav li.layui-this:hover{background:#008FBF}

/*移动设备处理*/

.cms-mobile{width:100%}

.cms-mobile .cms-header .cms-logo{left:50px;display:none}

.cms-mobile .cms-header .cms-top{left:10px;}

.cms-mobile .cms-header .cms-top #menuSwitch{display:none}

.cms-mobile .cms-header .cms-top #cmsMobile{display:block;cursor:pointer}

.cms-mobile .cms-top-menu{display:none;background:#23262E;opacity:1;position:fixed;top:0;left:60px;z-index:9999999}

.cms-mobile .cms-offten-menu{display:none}

.cms-mobile .cms-left{display:none;width:200px;position:fixed;left:0;top:65px;z-index:9999999}

.cms-mobile .cms-body{width:100% !important;left:0}

.cms-mobile .cms-footer{left:0}

.cms-mobile .layui-tab-content .layui-tab-item iframe{min-width:100% !important}

/*pc屏幕兼容*/

@media screen and (max-width: 1024px){

.cms-offten-menu{display:none;}

}

layui.use(['cmsElem','layer','common','form','cmsMenu','cmsTab'],function(){

var $ = layui.jquery;

});

一键复制

编辑

Web IDE

原始数据

按行查看

历史