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

代码语言：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="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="62010d1010070d22050f030b0e4c010d0f">[email&#160;protected]</a></div>
                <span id="status" class="uk-margin-top uk-label uk-label-success">EN LINEA</span>
            </div>
            <br />
        </center>
        <ul class="uk-nav uk-nav-default">

            <li class="uk-nav-header">
                Elementos UI
            </li>
            <li><a href="buttons.html">Botones</a></li>
            <li><a href="components.html">Componentes</a></li>
            <li><a href="tables.html">Tablas</a></li>

            <li class="uk-nav-header">
                Paginas
            </li>
            <li><a href="login.html">Iniciar sesión</a></li>
            <li><a href="register.html">Registrar</a></li>
            <li><a href="article.html">Articulo</a></li>
            <li><a href="404.html">404</a></li>
        </ul>
    </div>
    <div class="content-padder content-background">
        <div class="uk-section-small uk-section-default header">
            <div class="uk-container uk-container-large">
                <h1><span uk-icon="server"></span> Escritorio</h1>
                <p>
                    Bienvenido, Adrián UB
                </p>
                <ul class="uk-breadcrumb">
                    <li><a href="index.html">Inicio</a></li>
                    <li><span href="">Escritorio</span></li>
                </ul>
            </div>
        </div>
        <div class="uk-section-small">
            <div class="uk-container uk-container-large">
                <div uk-grid class="uk-child-width-1-1@s uk-child-width-1-2@m uk-child-width-1-4@xl">
                    <div>
                        <div class="uk-card uk-card-default uk-card-body">
                            <span class="statistics-text">Nuevos Registros</span><br />
                            <span class="statistics-number">
                            14.164
                            <span class="uk-.........完整代码请登录后点击上方下载按钮下载查看