简洁自适应后台dashboard仪表盘效果-html代码-BFW代码库

简洁自适应后台dashboard仪表盘效果

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700'>
<link rel='stylesheet' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/tachyons.min.css">
<style>
body {
  font-family: 'Roboto';
  -webkit-font-smoothing: antialiased;
}

.bg-green {
  background: #1BC98E;
}

.bg-red {
  background: #E64759;
}

.bg-purple {
  background: #9F86FF;
}

.divide:before {
  background: rgba(0, 0, 0, 0.1);
  content: '';
  height: 1px;
  left: 0;
  position: absolute;
  right: 0;
  top: 8px;
  width: 100%;
  z-index: -1;
}
</style>

</head>
<body translate="no">
<main>
<div class="mw8 center pv4 ph3" id="dashboard">
<section class="flex-m flex-l nl3-m nr3-m nl3-l nr3-l">
<nav class="w-100 w-25-m w-25-l mb4 mb0-l ph3-m ph3-l">
<header class="mb2">
<i class="material-icons f2 black-70">dashboard</i>
</header>
<form class="mb4 w-100 w-70-m w-80-l">
<input type="text" placeholder="Search" class="input-reset ba b--black-20 pa1 br2 f5 w-100" />
</form>
<h2 class="ttu mt0 mb2 f6 fw5 silver">Vector</h2>
<ul class="list pl0 mt0 mb4">
<li class="mb2">
<a href="#" class="block link dim blue">Overview</a>
</li>
<li class="mb2">
<a href="#" class="block link dim blue">Servers History</a>
</li>
<li class="mb2">
<a href="#" class="block link dim blue">SONIC</a>
</li>
<li>
<a href="#" class="block link dim blue">Infrastructures</a>
</li>
</ul>
<h2 class="ttu mt0 mb2 f6 fw5 silver">More</h2>
<ul class="list pl0 mt0 mb2">
<li class=".........完整代码请登录后点击上方下载按钮下载查看