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 {
                padding-left: 40px
            }
            .content-padder {
                margin-left: 300px;
            }
        }
    </style>



</head>

<body>
    <div uk-sticky class="uk-navbar-container tm-navbar-container uk-active uk-light">
        <div class="uk-container uk-container-expand">
            <nav uk-navbar>
                <div class="uk-navbar-left">
                    <a id="sidebar_toggle" class="uk-navbar-toggle" uk-navbar-toggle-icon></a>
                    <a href="#" class="uk-navbar-item uk-logo">
                    UIKit Admin
                </a>
                </div>
                <div class="uk-navbar-right uk-light">
                    <ul class="uk-navbar-nav">
                        <li class="uk-active">
                            <a href="#">Adrián &nbsp;<span uk-icon="chevron-down"></span></a>
                            <div uk-dropdown="pos: bottom-right; mode: click; offset: -17;">
                                <ul class="uk-nav uk-navbar-dropdown-nav">
                                    <li class="uk-nav-header">Opciones</li>
                                    <li><a href="#">Editar Perfil</a></li>
                                    <li class="uk-nav-header">Acciones</li>
                                    <li><a href="#">Bloquear</a></li>
                                    <li><a href="#">Cerrar sesión</a></li>
                                </ul>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    </div>
    <div id="sidebar" class="tm-sidebar-left uk-background-default">
        <center>
            <div class="user">
                <img id="avatar" width="100" class="uk-border-circle" src="//repo.bfw.wiki/bfwrepo/image/608013b6c1026.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100,h_100,/quality,q_90" />
                <div class="uk-margin-top"></div>
                <h3 class="uk-text-truncate">Adrián UB</h3>
                <div id="email" class="uk-text-truncate"><a href="/.........完整代码请登录后点击上方下载按钮下载查看