简洁后台效果
代码语言: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; overflow-x: hidden; -webkit-overflow-scrolling: touch; background-color: var(--bg-color); } .admin__footer { display: -webkit-box; display: flex; grid-area: footer; flex-basis: 100%; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; height: 40px; padding: 0 var(--spacing); color: #4e5561; background-color: #1d2127; } @media screen and (min-width: 48rem) { .admin { --spacing: 2rem; } } .dashboard { --column-count: 2; display: -webkit-box; display: flex; flex-wrap: wrap; margin: 0 calc(var(--spacing) * -0.5); display: grid; grid-template-columns: repeat(var(--column-count), 1fr); grid-gap: var(--spacing); } .dashboard__item { -webkit-box-flex: 1; flex: 1 1 50%; grid-column-end: span 2; padding: calc(var(--spacing) / 2); } .dashboard__item--full { flex-basis: 100%; grid-column: 1 / -1; } .dashboard__item--col { flex-basis: calc(100% / var(--column-count)); grid-column-end: span 1; } @media screen and (min-width: 48rem) { .dashboard { --column-count: 4; } } @supports (display: grid) { .dashboard { margin: 0; } .dashboard__item { padding: 0; } } a { color: #dc5a60; text-decoration: none; } img { max-width: 100%; height: auto; } .logo { display: -webkit-box; display: flex; -webkit-box-flex: 0; flex: 0 0 300px; height: 80px; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; position: relative; margin: 0; color: #fff; background-color: var(--bcn-orange); font-size: 1rem; } .logo h1 { margin: 0; } .toolbar { display: -webkit-box; display: flex; -webkit-box-flex: 1; flex: 1; -webkit-box-pack: justify; justify-content: space-between; -webkit-box-align: center; align-items: center; padding: 0 var(--spacing); } .menu { list-style-type: none; padding: 0; } .menu__title { display: block; padding: 2rem 2rem .5rem; color: #76808f; font-weight: 700; } .menu__divider::before { content: ""; display: block; width: calc(100% - 60px); height: 2px; margin: 30px 30px 40px; background-color: #76808f; } .menu__link { display: block; padding: 10px 30px; color: #76808f; text-decoration: none; } .menu__link.is-active { color: #fff; background-color: var(--bcn-orange-dark); border-left: 3px solid var(--bcn-orange); } .menu__link:hover, .menu__link:focus { color: currentcolor; background-color: var(--bcn-orange-light); } .card { height: 100%; font-weight: 300; background-color: #fff; border: 1px solid #e6eaee; -webkit-transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); } .card__header { padding: 20px 30px; border-bottom: 1px solid #e6eaee; font-weight: 700; } .card__item { padding: 20px 30px; } .btn { display: inline-block; border-radius: 5em; border: 0; padding: 0.5rem 1rem; white-space: nowrap; } .btn--primary { color: #fff; background-color: #56bf89; } </style> </head> <body translate="no"> <div class="admin"> <header class="admin__header"> <a href="#" class="logo"> <h1>Dashboard</h1> </a> <div class="toolbar"> <div class="toolbar__left"> <button class="btn btn--primary">Add content</button> </div> <div class="toolbar__right"> <a href="#" class="btn btn--primary logout">Log Out</a> </div> </div> </header> <nav class="admin__nav"> <ul class="menu"> <li class="menu__title">Dashboard</li> <li class="menu__item"> <a class="menu__link" href="#">Dashboard</a> </li> <li class="menu__item"> <a class="menu__link" href="#">Performance</a> </li> <li class="menu__title">Content</li> <li class="menu__item"> <a class="menu__link" href="#">Media</a> </li> <li class="menu__item"> <a class="menu__link" href="#">Templates</a> </li> <li class="menu__title">Network</li> <li class="menu__item"> <a class="menu__link is-active" href="#">Players</a> </li> <li class="menu__item"> <a class="menu__link" href="#">Channels</a> </li> <li class="menu__item"> <a class="menu__link" href="#">Domains</a> </li> <li class="menu__title">Account</li> <li class="menu__item"> <a class="menu__link" href="#">Account Details</a> </li> <li class="menu__item"> <a class="menu__link" href="#">Account Settings</a> </li> <li class="menu__title">Help</li> <li class="menu__item"> <a class="menu__link" href="#">Documentation</a> </li> <li class="menu__item"> <a class="menu__link" href="#".........完整代码请登录后点击上方下载按钮下载查看
网友评论0