aqua布局示例代码-html代码-BFW代码库

代码语言：html

代码描述：aqua布局示例代码，aqua.css是一个轻量级的CSS框架，用于构建现代化的、漂亮的Web界面。它专注于提供一套简洁、直观的CSS样式，使开发者能够快速创建吸引人的用户界面。

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

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua.min.css">
    <style>
        body {
          min-height: 100vh;
          margin: 0;
          font-size: 14px;
          color: var(--secondary-color-darkest);
        }
        h1 { text-align: center; }
        :root {
          --secondary-color: hsl(240, 56%, 98%);
          --secondary-color-darker: hsl(240, 56%, 90%);
          --secondary-color-darkest: hsl(243, 24%, 43%);
          --info-color-darker: rgb(51, 42, 124);
          --info-color-lighter: rgb(92, 95, 178);
        }
        
        .dashboard {
          display: grid;
          grid-template-columns: repeat(3, auto);
          gap: 48px;
          margin: 12px;
        }
        
        .dashboard-sidenav {
          display: grid;
          grid-template-rows: repeat(3, auto);
          justify-items: center;
          color: white;
          background: var(--info-color-darker);
          border-radius: 30px;
        }
        
        .logo {
          padding: 36px 18px;
          font-size: 18px;
          font-weight: bold;
          color: white;
          text-decoration: none;
        }
        
        .nav-icon-list {
          display: flex;
          flex-direction: column;
          padding: 0;
          margin: 0;
          list-style-type: none;
        }
        .nav-icon-list__item {
          padding: 36px 18px;
        }
        .nav-icon-list__item:first-child {
          padding-top: 0;
        }
        
        .logout {
          padding: 36px 18px;
        }
        
        .welcome-banner {
          padding: 18px 36px;
          color: white;
          background: var(--warning-color-darker);
          border-radius: 20px;
        }
        
        .section-titles {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 28px 0;
        }
        
        .section-title {
          display: grid;
          grid-template-columns: repeat(2, auto);
          align-items: center;
          font-size: 18px;
        }
        
        .nav-btns {
          --divider-length: 0;
          margin-left: 24px;
        }
        .nav-btns .btn {
          padding: 9px 0;
          line-height: 1;
        }
        .nav-btns .btn:first-child {
          padding-left: 15px;
          padding-right: 3px;
        }
        .nav-btns .btn:last-child {
          padding-left: 3px;
          padding-right: 15px;
        }
        
        .month {
          padding: 9px 18px;
          color: var(--secondary-color-darkest);
        }
        
        .time-list {
          display: grid;
          grid-template-columns: repeat(7, auto);
          column-gap: 21px;
          padding: 18px 0;
          border: 1px solid var(--secondary-color-lighter);
          border-left: none;
          border-right: none;
          list-style-type: none;
        }
        .time-list__item {
          display: grid;
          grid-template-rows: repeat(3, auto);
          justify-items: center;
          padding: 16px 12px;
          border-radius: 20px;
        }
        .time-list__item.active {
          color: white;
          background: var(--danger-color);
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        }
        .time-list__item.active .day-dot {
          color: white !important;
        }
        .time-list__item .day {
          font-weight: bold;
          margin-bottom: 18px;
        }
        .time-list__item .day-number {
          margin-bottom: 8px;
        }
        .time-list__item .day-dot {
          width: 6px;
          height: 6px;
          color: var(--dot-color);
          background: currentColor;
          border-radius: 50%;
        }
        
        .weeks-option {
          display: flex;
        }
        .weeks-option__item {
          color: var(--secondary-color-darkest);
          text-decoration: none;
        }
        .weeks-option__item:not(:last-child) {
          margin-right: 21px;
        }
        .weeks-option__item:not(.active) {
          opacity: 0.5;
        }
        
        .junk-list {
          display: grid;
          grid-template-columns: repeat(4, auto);
          gap: 30px;
          padding: 0;
          margin: 0;
          list-style-type: none;
        }
        .junk-list__item {
          display: flex;
          flex-direction: column;
          align-items: center;
          box-sizing: border-box;
          padding: 18px 24px;
          border: 1px solid var(--secondary-color-lighter);
          border-radius: 20px;
        }
        .junk-list__item:not(.active) {
          max-height: 148px;
        }
        .junk-list__item .junk-icon {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          border: 1px solid var(--junk-color);
          border-radius: 10px;
        }
        .junk-list__item .junk-name {
          margin-top: 18px;
          white-space: nowrap;
        }
        .junk-list__item .junk-size {
          margin-top: 9px;
          font-size: 18px;
          font-weight: bold;
          white-space: nowrap;
        }
        .junk-list__item.active {
          padding: 18px 3px 5px 3px;
          border: none;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        }
        .junk-list__item.active .junk-icon {
          background: var(--junk-color);
        }
        .junk-list__item.active .junk-icon svg {
          fill: white;
        }
        .junk-list__item.active .junk-size {
          margin-top: 21px;
          padding: 18px 36px;
          color: white;
          background: var(--junk-color);
          border-radius: 15px;
        }
        
        .monitor-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 32px;
          padding: 0;
          margin: 0;
          list-style-type: none;
        }
        .monitor-list__item {
          display: grid;
          grid-template-columns: repeat(2, auto);
          align-items: center;
          padding: 15px 30px;
          box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
          border-radius: 20px;
        }
        .monitor-list__item .monitor-data {
          padding: 18px 0;
        }
        .monitor-list__item .monitor-data .monitor-type {
          font-weight: bold;
          white-space: nowrap;
          margin: 0 40px 18px 0;
        }
        .monitor-list__item .monitor-gauge {
          padding: 0 0 0 40px;
          border-left: 1px solid var(--secondary-color-lighter);
        }
        .monitor-list__item .monitor-gauge .gauge {
          --gauge-color-lighter: var(--secondary-color);
          --text-color: var(--secondary-color-darkest);
          width: 70px;
          height: 70px;
        }
        .monitor-list__item .monitor-gauge .gauge::before {
          width: 87%;
          height: 87%;
          content: counter(value) "%";
        }
        .monitor-list__item.active {
          color: white;
          background: var(--info-color-darker);
        }
        .monitor-list__item.active .monitor-gauge {
          border-left-color: var(--info-color-lighter);
        }
        .monitor-list__item.active .gauge {
          --bg-color: var(--info-color-darker);
          --gauge-color-lighter: var(--info-color-lighter);
          color: white;
        }
        
        .dashboard-others {
          padding: 18px 48px;
          background: var(--secondary-color);
          border-radius: 30px;
        }
        
        .function-list {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 20px;
          padding: 0;
          margin: 0;
          list-style-type: none;
        }
        .function-list__item {
          padding: 4px;
          background: white;
          border-radius: 15px;
          transition: 0.3s;
        }
        .function-list__item:hover {
          box-shadow: 0 0 0 1px var(--function-color);
        }
        .function-list__item .function {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 4px;
          color: white;
          background: var(--function-color);
          border-radius: 15px;
        }
        .function-list__item .function-icon {
          display: flex;
   .........完整代码请登录后点击上方下载按钮下载查看