简洁后台效果-html代码-BFW代码库

简洁后台效果

代码语言：html

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
:root {
  --bg-color: #e5e5e5;
  --bcn-orange: #f16a2d;
  --bcn-orange-light: #f9ae56;
  --bcn-orange-dark: #d96129;
  --black: #333;
  --white: #f5f5f5;
  --text-color: #555;
  --border-color: rgb(238,238,238);
  --border-style: 1px solid var(--border-color);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  height: 100%;
  overflow-x: hidden;
}

.admin {
  --spacing: 1rem;
  display: -webkit-box;
  display: flex;
  flex-wrap: wrap;
  display: grid;
  height: 100vh;
  grid-template-rows: 80px 1fr 40px;
  grid-template-columns: 300px 1fr;
  grid-template-areas: "header header" "nav    main" "footer footer";
}
.admin__header {
  display: -webkit-box;
  display: flex;
  flex-basis: 100%;
  grid-area: header;
  height: 80px;
  background-color: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  position: relative;
}
.admin__nav {
  -webkit-box-flex: 0;
          flex: 0 0 300px;
  grid-area: nav;
  background-color: #313541;
}
.admin__main {
  -webkit-box-flex: 1;
          flex: 1;
  grid-area: main;
  padding: var(--spacing);
  overflow-y: auto;
  overfl.........完整代码请登录后点击上方下载按钮下载查看

简洁后台效果

网友评论0

css实现手风琴式图文人物介绍卡片折叠展开效果代码

js+css实现摄像头画面作为按钮材质反射的按钮交互效果代码

div+css布局实现热气腾腾咖啡效果代码

css+div布局实现立体质感电子锁按钮代码

css+div布局实现l立体质感checkbox开关效果代码

css实现空间立体文字卡片代码

dv+css布局实现冬季温暖的沙发客厅代码

tailwind+vue3+highlight实现一个ai聊天对话框页面代码

tailwindcss布局实现光线背影立体按钮效果代码

svg+css实现checkbox打钩选中美化代码