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

代码语言：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-width) 1fr;
   }
   
   .app-header {
      margin-left: calc(var(--app-sidebar-min-width) * -1);
   }
   
   .app-icon {
      font-size: 36px;
      margin: 0;
   }
   
   .app-branding {
      width: var(--app-sidebar-min-width);
      padding: 0;
      justify-content: center;
   }
   
   .app-brand {
      display: none;
   }
   
   .app-sidebar-menu > li {
      width: var(--app-sidebar-min-width);
   }
   
   .app-sidebar-menu > li > a {
      display: block;
      text-align: center;
   }
   
   .app-sidebar-menu > li > a > span {
      display: none;
   }
   
   .app-sidebar-menu > li > a > .menu-icon {
      margin: 0;
      padding: 0;
      font-size: 30px;
   }
}

.section {
   display: none;
}

/* Part of Demo Only */

.section h1 {
   font-size: 18px;
}

.section.active {
   display: block;
}

#dashboard-spark1,
#dashboard-spark2,
#dashboard-spark3,
#dashboard-chart {
   padding: 15px 15px 15px 5px;
   background: #fff;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
   border-radius: 4px;
   min-height: 400px;
   margin-bottom: 20px;
}

.sparklines {
   display: flex;
   width: 100%;
}

.sparklines > div {
   flex: 1;
}

.sparklines > div#dashboard-spark2 {
   margin: 0 20px 20px;
}

@media screen and (max-width: 768px) {
   .sparklines {
      display: block;
   }
   
   .sparklines > div {
      margin: 0 0 20px !important;
   }
}
</style>




</head>

<body  >
  <div class="app-viewport inspect_">

   <div class="app-header">
      <div class="app-branding">
         <i class="material-icons app-icon">change_history</i>
         <h1 class="app-brand">Backend</h1>
      </div>
      <div class="app-nav">
         <p>Navigation</p>
      </div>
   </div>
   
   <!-- 
   ---- App Content 
   --->
   <div class="app-main">
      
      <!-- 
      ---- Dashboard
      --->
      <div data-page-name="dashboard" class="section">
         <div id="dashboard-chart"></div>
         <div class="sparklines">
            <div id="dashboard-spark1"></div>
            <div id="dashboard-spark2"></div>
            <div id="dashboard-spark3"></div>
         </div>
      </div>
      
      <div data-page-name="not_found" class="section">
         <h1>Not Found</h1>
      </div>

   </div>
   
   <!-- 
   ---- App Sidebar
   --->
   <div class="app-sidebar">

      <ul class="app-sidebar-menu">
         <li class="active">
            <a href="#dashboard">
              <i class="material-icons menu-icon">explore</i>
              <span>Dashboard</span>
            </a>
         </li>
         <li>
            <a href="#paym.........完整代码请登录后点击上方下载按钮下载查看