aqua布局示例代码
代码语言：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;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
}
.function-list__item .function-data {
display: flex;
justify-content: space-between;
padding: 30px 16px 21px 16px;
}
.function-list__item .function-name {
margin-right: 22px;
white-space: nowrap;
}
.function-list__item .function-switch {
--switch-ball-color: var(--function-color);
--switch-checked-color: var(--function-color);
--border-color: var(--function-color);
--switch-hover-color: transparent;
--switch-disabled-checked-color: transparent;
}
.function-list__item .function-switch:checked {
--border-color: var(--function-color);
}
.function-list__item.update-function:hover {
box-shadow: 0 0 0 1px var(--secondary-color-darker);
}
.function-list__item.update-function .function-icon {
color: var(--secondary-color-darker);
background: white;
}
.function-list__item.update-function .function-menu {
color: var(--secondary-color-darker);
}
.function-list__item.update-function .function-switch {
--switch-ball-color: var(--secondary-color-darker);
--switch-checked-color: var(--secondary-color-darker);
--border-color: var(--secondary-color-darker);
--switch-hover-color: transparent;
--switch-disabled-checked-color: transparent;
}
.function-list__item.update-function .function-switch:checked {
--border-color: var(--secondary-color-darker);
}
.statistics {
display: flex;
flex-direction: column;
padding: 30px;
background: white;
border-radius: 15px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.statistics .progress-data {
display: flex;
justify-content: space-between;
}
.statistics .progress-text {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.statistics .progress-weekday {
margin-bottom: 14px;
}
.statistics .progress-rate {
font-size: 18px;
font-weight: bold;
}
.progress-list {
display: grid;
gap: 40px;
padding: 30px 0 0 0;
margin: 0;
list-style-type: none;
}
.progress-list__item {
display: flex;
align-items: center;
}
.progress-list__item .weekday-abbr {
box-sizing: border-box;
padding-right: 36px;
max-width: 32px;
}
.progress-list__item .progress-bar {
--bar-color: var(--secondary-color);
width: 300px;
}
.progress-list__item.active .weekday-abbr {
color: var(--warning-color);
}
.progress-list__item.active .progress-bar {
--progress-color: var(--warning-color);
}
</style>
</head>
<body>
<h1>aqua.css: Modern CSS Framework Example</h1>
<main class="dashboard">
<nav class="dashboard-sidenav">
<a href="#" class="logo">CMPC</a>
<ul class="nav-icon-list">
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716314757" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2469" width="20" height="20">
<path d="M372.2 347.6h329.1c15.1 0 27.4-12.3 27.4-27.4 0-15.1-12.3-27.4-27.4-27.4H372.2c-15.1 0-27.4 12.3-27.4 27.4 0 15.2 12.3 27.4 27.4 27.4zM235.1 457.3h493.6c90.9 0 164.5-73.7 164.5-164.5 0-90.9-73.7-164.5-164.5-164.5v54.8c77.4 14.6 109.7 49.1 109.7 109.7S775 402.5 696.7 402.5H235.1c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.2 27.4 27.4 27.4z m274.3 164.6c-0.1 0-0.1 0 0 0H290c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.3 27.4 27.4 27.4h219.4c30.3 0 54.8 24.6 54.8 54.8 0 30.3-24.6 54.8-54.8 54.8v54.8c60.6 0 109.7-49.1 109.7-109.7-0.1-60.4-49.2-109.5-109.7-109.5z m219.3-109.7H152.8c-15.1 0-27.4 12.3-27.4 27.4 0 15.1 12.3 27.4 27.4 27.4h543.9c78.3 0 141.7 49.1 141.7 109.7s-46.9 109.7-164.5 109.7v54.9h54.8c90.9 0 164.5-73.7 164.5-164.5 0-91-73.6-164.6-164.5-164.6z" p-id="2470"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716413875" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5091" width="20" height="20" fill="white">
<path d="M935.6192 68.266667 88.3808 68.266667C49.0592 68.266667 17.066667 100.8064 17.066667 140.8l0 554.666667c0 39.994667 31.991467 72.533333 71.314133 72.533333L473.6 768l0 112.424533L298.666667 880.424533c-20.795733 0-37.6544 16.858667-37.6544 37.6544S277.8688 955.733333 298.666667 955.733333l426.666667 0c20.795733 0 37.6544-16.858667 37.6544-37.6544S746.129067 880.424533 725.333333 880.424533L550.4 880.424533 550.4 768l385.2192 0C974.941867 768 1006.933333 735.461333 1006.933333 695.466667L1006.933333 140.8C1006.933333 100.8064 974.941867 68.266667 935.6192 68.266667zM930.133333 691.2 93.866667 691.2 93.866667 145.066667l836.266667 0L930.133333 691.2z" p-id="5092"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716468220" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7384" width="20" height="20">
<path d="M904 875.9H120c-30.9 0-56-25.1-56-56V204.1c0-30.9 25.1-56 56-56h231.6c12.8 0 25.2 4.4 35.2 12.4L509.9 260H904c30.9 0 56 25.1 56 56v503.8c0 31-25.1 56.1-56 56.1z m0-56v28-28zM351.6 204.1H120v615.8h784l0.1-503.8H510c-12.8 0-25.3-4.4-35.3-12.5l-123.1-99.5z" p-id="7385"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716626339" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11970" width="20" height="20">
<path d="M221.5 638.6V117.8c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v520.8c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v64.3c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V842c47.4-9.6 83-51.5 83-101.7s-35.6-92.1-83-101.7z m-20.7 163.9c-34.3 0-62.3-27.9-62.3-62.3s27.9-62.3 62.3-62.3c34.3 0 62.3 27.9 62.3 62.3s-28 62.3-62.3 62.3zM927 283.8c0-50.2-35.6-92-83-101.7v-64.3c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v64.3c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v520.8c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V385.4c47.4-9.6 83-51.5 83-101.6zM823.3 346c-34.3 0-62.3-27.9-62.3-62.3s27.9-62.3 62.3-62.3c34.3 0 62.3 27.9 62.3 62.3s-28 62.3-62.3 62.3zM532.8 410.3V117.8c0-11.5-9.3-20.8-20.8-20.8s-20.8 9.3-20.8 20.8v292.6c-47.4 9.6-83 51.5-83 101.7s35.6 92 83 101.7v292.6c0 11.5 9.3 20.8 20.8 20.8s20.8-9.3 20.8-20.8V613.7c47.4-9.6 83-51.5 83-101.7s-35.7-92-83-101.7z" p-id="11971"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716675382" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12846" width="20" height="20">
<path d="M507.050667 170.666667c85.546667 0 155.178667 61.696 155.178666 137.514666v92.544H351.872V308.181333C351.872 232.362667 421.546667 170.666667 507.050667 170.666667m276.309333 407.978666a21.333333 21.333333 0 0 0 21.333333-21.333333V499.157333c0-52.010667-44.245333-94.293333-99.797333-97.792V308.181333C704.896 208.810667 616.149333 128 507.050667 128 397.952 128 309.205333 208.810667 309.205333 308.181333v93.013334C252.629333 403.669333 207.36 446.464 207.36 499.157333v255.701334C207.36 809.173333 255.317333 853.333333 314.24 853.333333h383.488C756.693333 853.333333 804.693333 809.173333 804.693333 754.858667v-69.546667a21.333333 21.333333 0 0 0-42.666666 0v69.546667c0 30.805333-28.842667 55.808-64.298667 55.808H314.24C278.826667 810.666667 250.026667 785.664 250.026667 754.858667V499.157333c0-30.762667 28.8-55.765333 64.213333-55.765333h383.488c35.456 0 64.298667 25.002667 64.298667 55.765333v58.154667a21.333333 21.333333 0 0 0 21.333333 21.333333" p-id="12847"></path>
</svg></a>
</li>
<li class="nav-icon-list__item">
<a href="#"><svg t="1585716717590" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13969" width="20" height="20">
<path d="M893.842 217.557H130.159c-16.261 0-29.443 13.182-29.443 29.443v530c0 16.261 13.182 29.443 29.443 29.443h763.683c16.261 0 29.443-13.183 29.443-29.443V247c0-16.261-13.182-29.443-29.443-29.443z m-85.584 58.886L512 507.651 215.742 276.443h592.516zM159.602 747.557v-440.23l334.283 260.885A29.4 29.4 0 0 0 512 574.443a29.4 29.4 0 0 0 18.115-6.231l334.283-260.884v440.229H159.602z" fill="" p-id="13970"></path>
</svg></a>
</li>
</ul>
<a href="#" class="logout">
<svg t="1585716806344" class="icon" fill="white" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18154" width="20" height="20">
<path d="M398.933333 896h-151.466666C181.333333 896 128 842.666667 128 776.533333V247.466667C128 181.333333 181.333333 128 247.466667 128h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666666h-151.466666c-19.2 0-34.133333 14.933333-34.133334 34.133334v531.2c0 19.2 14.933333 34.133333 34.133334 34.133333h151.466666c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 40.533333-42.666667 40.533333zM663.466667 744.533333c-10.666667 0-21.333333-4.266667-29.866667-12.8-17.066667-17.066667-17.066667-42.666667 0-59.733333l160-160-160-160c-17.066667-17.066667-17.066667-42.666667 0-59.733333 17.066667-17.066667 42.666667-17.066667 59.733333 0l189.866667 189.866666c17.066667 17.066667 17.066667 42.666667 0 59.733334l-189.866667 189.866666c-8.533333 8.533333-19.2 12.8-29.866666 12.8z" p-id="18155"></path>
<path d="M853.333333 554.666667H398.933333c-23.466667 0-42.666667-19.2-42.666666-42.666667s19.2-42.666667 42.666666-42.666667H853.333333c23.466667 0 42.666667 19.2 42.666667 42.666667s-19.2 42.666667-42.666667 42.666667z" p-id="18156"></path>
</svg>
</a>
</nav>
<article class="dashboard-content">
<header class="welcome-banner">
<h2>Hello, alphardex!</h2>
<p>Welcome back to Clean My PC</p>
</header>
<section class="section">
<div class="section-titles">
<div class="section-title">
Mar 22-28
<div class="btn-group nav-btns">
<button class="btn btn-danger btn-round">
<svg t="1585663627827" class="arrow-left-icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1157" data-darkreader-inline-fill="" width="20" height="20">
<path d="M629.291 840.832l60.331-60.331-268.501-268.501 268.501-268.501-60.331-60.331-328.832 328.832z" p-id="1158"></path>
</svg></button><button class="btn btn-danger btn-round">
<svg t="1585663663731" class="arrow-right-icon" fill="currentColor" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1391" data-darkreader-inline-fill="" width="20" height="20">
<path d="M689.621 512l-328.832-328.832-60.331 60.331 268.501 268.501-268.501 268.501 60.331 60.331z" p-id="1392"></path>
</svg>
</button>
</div>
</div>
<div class="section-subtitle">
<button class="btn btn-secondary btn-round month">
<svg t="1585661389235" fill="currentColor" class="calender-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6514" width="14" height="14">
<path d="M810.666667 981.333333H213.333333c-72.533333 0-128-55.466667-128-128V256c0-72.533333 55.466667-128 128-128h597.333334c72.533333 0 128 55.466667 128 128v597.333333c0 72.533333-55.466667 128-128 128zM213.333333 213.333333c-25.6 0-42.666667 17.066667-42.666666 42.666667v597.333333c0 25.6 17.066667 42.666667 42.666666 42.666667h597.333334c25.6 0 42.666667-17.066667 42.666666-42.666667V256c0-25.6-17.066667-42.666667-42.666666-42.666667H213.333333z" p-id="6515"></path>
<path d="M682.666667 298.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667V85.333333c0-25.6 17.066667-42.666667 42.666667-42.666666s42.666667 17.066667 42.666666 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666666 42.666667zM341.333333 298.666667c-25.6 0-42.666667-17.066667-42.666666-42.666667V85.333333c0-25.6 17.066667-42.666667 42.666666-42.666666s42.666667 17.066667 42.666667 42.666666v170.666667c0 25.6-17.066667 42.666667-42.666667 42.666667zM896 469.333333H128c-25.6 0-42.666667-17.066667-42.666667-42.666666s17.066667-42.666667 42.666667-42.666667h768c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666666z" p-id="6516"></path>
</svg>
Month
</button>
</div>
</div>
<ul class="time-list">
<li class="time-list__item" style="--dot-color: var(--warning-color);">
<div class="day">Mon</div>
<div class="day-number">22</div>
<div class="day-dot"></div>
</li>
<li class="time-list__item" style="--dot-color: var(--primary-color);">
<div class="day">Tue</div>
<div class="day-number">23</div>
<div class="day-dot"></div>
</li>
<li class="time-list__item" style="--dot-color: var(--danger-color);">
<div class="day">Wed</div>
<div class="day-number">24</div>
<div class="day-dot"></div>
</li>
<li class="time-list__item active" style="--dot-color: var(--danger-color);">
<div class="day">Thu</div>
<div class="day-number">25</div>
<div class="day-dot"></div>
</li>
<li class="time-list__item" style="--dot-color: var(--warning-color);">
<div class="day">Fri</div>
<div class="day-number">26</div>
<div class="day-dot"></div>
</li>
<li class="time-list__item" style="--dot-color: var(--danger-color);">
<div class="day">Sat</div>
<div class="day-number">27</div>
<div class="day-dot"></div>
</li>
<li class="time-list__item" style="--dot-color: var(--primary-color);">
<div class="day">Sun</div>
<div class="day-number">28</div>
<div class="day-dot&q.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0