css实现蓝色极简后台仪表盘效果代码-html代码-BFW代码库

css实现蓝色极简后台仪表盘效果代码

代码语言：html

所属分类：图表

代码描述：css实现蓝色极简后台仪表盘效果代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  

  
<style>
/* Vars */

:root {
   --app-sidebar-width: 240px;
   --app-sidebar-min-width: 60px;
   --app-header-height: 60px;
   --app-padding: 1rem;
}

/* Base */

html,
body {
   font-family: Inter, Arial, sans-serif;
   background: #eff4f7;
}

html,
body,
.app-viewport {
   height: 100%;
   margin: 0;
}

.app-viewport.inspect * {
   border: 1px solid red;
}

/* Grid Layout */

.app-viewport * {
   position: relative;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

.app-viewport {
   display: grid;
   grid-template-columns: var(--app-sidebar-width) 1fr;
   grid-template-rows: var(--app-header-height) 1fr;
   grid-template-areas:
      "AppSidebar AppHeader"
      "AppSidebar AppMain";
}

.app-header {
   grid-area: AppHeader;
   margin-left: calc(var(--app-sidebar-width) * -1);
   z-index: 2;
}

.app-nav,
.app-header,
.app-branding {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-items: flex-start;
   color: #fff;
}

.app-nav {
   padding: 0 var(--app-padding);
   flex: auto;
}

.app-branding {
   width: var(--app-sidebar-width);
   padding: 0 var(--app-padding);
}

.app-main {
   grid-area: AppMain;
   overflow-y: auto;
   z-index: 1;
   padding: var(--app-padding);
}

.app-sidebar {
   display: grid;
   grid-area: AppSidebar;
   margin-top: var(--app-header-height);
   overflow: hidden;
   overflow-y: auto;
   z-index: 1;
}

.app-sidebar-menu {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   .........完整代码请登录后点击上方下载按钮下载查看