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;
   flex-direction: column;
}

.app-sidebar-menu > li > a {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   justify-items: start;
   padding: 5px 0;
}

.app-sidebar-menu > li > a > .menu-icon {
   margin-left: 15px;
}

.app-sidebar-menu > li > a > span {
   margin-left: 10px;
}

/* Color / Presentation Only */

.placeholder {
   display: block;
   height: 1200px;
   background: rgba(0, 0, 0, 0.05);
}

.placeholder:after {
   content: " ";
}

.app-viewport {
   background: #e9ecef;
}

.app-header,
.app-sidebar-header {
   background: #202020;
}

.app-sidebar {
   background: #0d28f2;
   font-size: 15px;
   padding: 20px 0;
}

.app-sidebar-menu > li > a {
   text-decoration: none;
   color: #fff;
   opacity: 0.5;
}

.app-sidebar-menu > li.active > a,
.app-sidebar-menu > li > a:hover {
   opacity: 1;
}

.app-icon {
   font-size: 28px;
   margin-right: 5px;
   font-weight: 500;
}

.app-brand {
   font-size: 130%;
   font-weight: 500;
   line-height: 1.2rem;
}

.app-nav-toggle,
.app-brand {
   color: #fff;
}

/* Responsive */

@media screen and (max-width: 768px) {
   .app-viewport {
      grid-template-columns: var(--app-sidebar-min-.........完整代码请登录后点击上方下载按钮下载查看