uikit实现自适应简洁后台管理页面统计报表页面代码-html代码-BFW代码库

uikit实现自适应简洁后台管理页面统计报表页面代码

代码语言：html

所属分类：响应式

代码描述：uikit实现自适应简洁后台管理页面统计报表页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">


    <!-- UIkit CSS -->
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/uikit.min.css">
    <style>
        .uk-navbar-container {
            background-color: #1e87f0 !important;
        }
        
        .header {
            box-sizing: border-box;
            border-bottom: 1px #e5e5e5 solid;
        }
        .content-padder {
            margin-left: 0px;
        }
        .content-background {
            min-height: calc(100% - 80px);
            background-color: #F0F0F0;
        }
        .statistics-text {
            font-size: 25px;
        }
        .statistics-number {
            font-size: 50px;
        }
        
        
        
        
        
        .tm-sidebar-left {
            position: fixed;
            z-index: 100;
            top: 80px;
            bottom: 0;
            box-sizing: border-box;
            width: 240px !important;
            padding: 40px 40px 60px 40px;
            border-right: 1px #e5e5e5 solid;
            overflow-y: auto;
                overflow-x: hidden;
        }
        .tm-sidebar-left::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
                background-color: #F5F5F5;
        }
        
        .tm-sidebar-left::-webkit-scrollbar {
                width: 6px;
                background-color: #F5F5F5;
        }
        
        .tm-sidebar-left::-webkit-scrollbar-thumb {
                -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
                background-color: #bdbdbd;
        }
        
        .tm-sidebar-right {
            position: absolute;
            top: 0;
            left: calc(100% + 0px);
            width: 200px
        }
        @media(max-width: 960px) {
            .tm-sidebar-left {
                opacity: 0;
            }
        }
        
        @media (min-width: 960px) {
            .content-padder {
                margin-left: 240px;
            }
        }
        @media (min-width: 1200px) {
            .tm-sidebar-right {
                left: calc(100% + 0px);
            }
            .tm-sidebar-left+.tm-main {
                padding-left: 40px;
                opacity: 0 !important;
            }
        }
        @media (min-width: 1400px) {
            .tm-sidebar-left {
                width: 300px !important;
                padding: 45px 45px 60px 45px
            }
            .tm-sidebar-right {
                left: calc(100% + 60px)
            }
            .tm-sidebar-left+.tm-main {
                pad.........完整代码请登录后点击上方下载按钮下载查看