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

css布局模仿苹果mac的邮箱UI界面黑白主题效果

代码语言：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;
}
.d.........完整代码请登录后点击上方下载按钮下载查看