css布局模仿苹果mac的邮箱UI界面黑白主题效果-html代码-BFW代码库

代码语言：html

代码描述：css布局模仿苹果mac的邮箱UI界面黑白主题效果

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


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

<style>
html {
  --device-height: 500px;
  --device-width: 1000px;
  --device-sb-width: 200px;
  --device-unit: 12px;
  --device-tab-size: var(--device-unit) * 3;
  --btn-size: var(--device-unit);
  --btn-gap: var(--device-unit) * .666;
  --btn-border-size: var(--device-unit) / 12;
  --device-bg: #fff;
  --device-color: #fff;
  --device-tab-color1: #ecebec;
  --device-tab-color2: #d4d3d4;
  --device-sidebar-color: #E4E4E4;
  --device-border: rgba(0, 0, 0, 0.1);
  --device-shadow: rgba(0, 0, 0, 0.15);
  --btn-color1: #F86058;
  --btn-color2: #FCBD2E;
  --btn-color3: #2FCA41;
}
html:before {
  --btn-color1: #E14842;
  --btn-color2: #E0A127;
  --btn-color3: #2CAD28;
}
html.dark {
  --device-bg: #2a2a2c;
  --device-color: rgba(255, 255, 255, 0.2);
  --device-tab-color1: #404040;
  --device-tab-color2: #343436;
  --device-sidebar-color: #2a2a2c;
  --device-border: rgba(0, 0, 0, 0.9);
  --device-shadow: rgba(0, 0, 0, 0.15);
}
html.dark:before {
  --btn-color1: #F86058;
  --btn-color2: #FCBD2E;
  --btn-color3: #2FCA41;
}
.device-mail {
  display: grid;
  grid-template-columns: var(--device-sb-width) 1fr;
  grid-template-rows: 32px minmax(auto, var(--device-height));
  grid-template-areas: "toolbar toolbar" "folders art";
  max-height: 80vh;
  padding-top: 23px;
  border: 1px;
  border-radius: 6px;
  box-shadow: 0 0 15px var(--device-shadow), inset 0 0 0 1px var(--device-color);
  overflow: hidden;
  position: relative;
  width: 100%;
  background-repeat: no-repeat;
  background-image: linear-gradient(var(--device-border), var(--device-border)), linear-gradient(var(--device-tab-color1), var(--device-tab-color2)), linear-gradient(var(--device-bg), var(--device-bg));
  background-size: 100% 1px,
    100% 55px,
    100% 100%
  ;
  background-position: 0 54px,
    top left,
    0 0
  ;
}
html.dark .device-mail {
  padding-left: 1px;
  padding-right: 1px;
  padding-bottom: 1px;
}
.device-mail:before,
.device-mail:after {
  content: '';
  position: absolute;
  top: 4px;
  left: var(--device-unit);
  width: var(--btn-size);
  height: var(--btn-size);
  border-radius: 50%;
  box-shadow: calc(var(--btn-size) + var(--btn-gap)) 0 0 var(--btn-color2), calc((var(--btn-size) * 2) + (var(--btn-gap) * 2)) 0 0 var(--btn-color3);
  background: var(--btn-color1);
}
.device-mail:after {
  top: 5px;
  --btn-size: calc(var(--device-unit) - (var(--btn-border-size) * 2));
  --btn-gap: calc((var(--device-unit) * 0.666) + (var(--btn-border-size) * 2));
  transform: translateX(calc(var(--btn-border-size)));
}
.device-mail__art {
  grid-area: art;
  overflow-y: scroll;
  border-radius: 0 0 5px 0;
  animation: screenOn 1s forwards ease-out;
}
.device-mail__art iframe {
  background: white;
}
.device-mail__art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
@keyframes screenOn {
  40% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.device-mail__toolbar {
  grid-area: toolbar;
  position: relative;
  --btn-pos: 0px;
}
.device-mail__toolbar:after {
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  left: 10px;
  top: 0;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.392' height='12.012'%3E %3Cg data-name='Group 1'%3E %3Cpath data-name='Path 49' d='M0 9.851v-7.7C0 .715.725-.004 1.98-.004h11.223a1.924 1.924 0 012.189 2.155v7.7c0 1.436-.725 2.161-1.98 2.161H2.188A1.922 1.922 0 010 9.851zm1.073.118l4-3.952-4.008-3.932v7.767a.614.614 0 00.008.117zM7.709 6.79a1.207 1.207 0 00.844-.432l5.249-5.179a1.236 1.236 0 00-.558-.112h-11.1a1.422 1.422 0 00-.544.1L6.863 6.36a1.184 1.184 0 00.847.43zm5.535 4.156a1.277 1.277 0 00.531-.1L9.613 6.732l-.453.446a1.879 1.879 0 01-2.9 0l-.453-.446-4.169 4.12a1.253 1.253 0 00.509.092zm1.081-8.84l-3.981 3.911 3.981 3.932V2.105z' fill='%23696969'/%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14.012'%3E %3Cpath data-name='Compose' d='M11.376 1.014l1.577 1.578-6.045 6.123L4.13 9.88 5.294 7.1zm2.4-.263l-.522-.526a.726.726 0 00-1.051 0l-.563.526 1.577 1.578.526-.526a.7.7 0 00.036-1.052zm-2.512 12.134a.355.355 0 01-.375.376H1.126a.355.355 0 01-.375-.376V3.118a.355.355 0 01.375-.376H8.6l.751-.751H1.126A1.107 1.107 0 000 3.118v9.767a1.107 1.107 0 001.126 1.127h9.762a1.107 1.107 0 001.126-1.127V4.658l-.751.751z' fill='%23696969'/%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/200.........完整代码请登录后点击上方下载按钮下载查看