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/2000/svg' width='14.129' height='13.012'%3E %3Cg data-name='Group 2'%3E %3Cpath data-name='Path 50' d='M1.053 10.906v-7.04A1.253 1.253 0 010 2.481V1.406A1.28 1.28 0 011.343 0h11.442a1.26 1.26 0 011.344 1.406v1.075a1.253 1.253 0 01-1.053 1.385v7.04a1.9 1.9 0 01-2.135 2.106H3.187a1.891 1.891 0 01-2.134-2.106zm11.45-8.085c.353 0 .487-.148.487-.5v-.749c0-.353-.134-.5-.487-.5H1.632c-.353 0-.495.148-.495.5v.749c0 .353.141.5.495.5zm-1.548 9.124a.887.887 0 00.982-.982V3.888H2.191v7.075a.884.884 0 00.983.982zM4.234 6.22v-.226a.477.477 0 01.5-.509h4.665a.482.482 0 01.509.509v.226a.488.488 0 01-.509.516H4.734a.483.483 0 01-.5-.517z' fill='%23696969'/%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14'%3E %3Cpath data-name='Delete' d='M12 1.556H8.8v-.389A1.163 1.163 0 007.6 0H4.4a1.163 1.163 0 00-1.2 1.167v.389H0v.778h.8l.36 10.539A1.208 1.208 0 002.36 14H9.6a1.208 1.208 0 001.2-1.128l.4-10.539h.8zm-8-.389a.373.373 0 01.4-.389h3.2a.373.373 0 01.4.389v.389H4zm6.04 11.667a.424.424 0 01-.4.389H2.36a.4.4 0 01-.4-.389L1.6 2.333h8.8zM3.2 4.278H4v6.611h-.8zm2.4 0h.8v6.611h-.8zm2.4 0h.8v6.611H8z' fill='%23696969'/%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15.369' height='11.794'%3E %3Cg data-name='Group 3'%3E %3Cpath data-name='Path 51' d='M2.312 9.95l-.954-6.425h-.137A1.141 1.141 0 01.004 2.25v-.973A1.16 1.16 0 011.221 0h12.93a1.142 1.142 0 011.218 1.275v.975a1.142 1.142 0 01-1.218 1.275h-.146l-.948 6.425c-.186 1.256-.75 1.846-2.012 1.846H4.321c-1.259-.002-1.823-.585-2.009-1.846zm11.583-7.392c.32 0 .442-.136.442-.456v-.679c0-.32-.121-.455-.442-.455H1.48c-.32 0-.449.134-.449.455v.679c0 .32.129.456.449.456zm-2.863 8.27a.907.907 0 001-.89l.954-6.413h-10.6l.954 6.413a.9.9 0 001 .89zm-5.7-1.839a.463.463 0 01.148-.339l1.512-1.519L5.48 5.607a.465.465 0 01-.148-.34.482.482 0 01.493-.48.447.447 0 01.333.146l1.519 1.512 1.537-1.519a.453.453 0 01.333-.153.489.489 0 01.493.493.442.442 0 01-.154.333L8.374 7.13l1.505 1.512a.461.461 0 01.154.345.481.481 0 01-.833.347L7.676 7.815 6.164 9.334a.482.482 0 01-.34.153.5.5 0 01-.494-.5z' fill='%23696969'/%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.099' height='12'%3E %3Cpath data-name='Path 52' d='M5.491 11.575L.331 6.703a.908.908 0 010-1.406L5.491.471C5.857.163 6.054 0 6.381 0a.782.782 0 01.778.8v2.472h.19c4.7 0 6.749 3.015 6.749 7.847 0 .563-.32.876-.674.876a.827.827 0 01-.8-.484c-1.138-2.138-2.74-2.779-5.271-2.779h-.19v2.5a.746.746 0 01-.764.766 1.343 1.343 0 01-.908-.423z' fill='%23696969'/%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.402' height='12'%3E %3Cpath data-name='Path 53' d='M5.493 11.575L.333 6.703a.908.908 0 010-1.406L5.493.471C5.859.163 6.056 0 6.383 0a.707.707 0 01.778.595v.281L3.015 4.67a1.763 1.763 0 00-.634 1.334 1.8 1.8 0 00.634 1.327l4.146 3.819v.281c0 .3-.327.569-.766.569a1.34 1.34 0 01-.902-.425zm3.309 0L3.636 6.703a.993.993 0 01-.334-.7.958.958 0 01.334-.706L8.802.471C9.168.163 9.365 0 9.685 0a.778.778 0 01.778.8v2.472h.19c4.7 0 6.749 3.015 6.749 7.847 0 .563-.32.876-.667.876a.817.817 0 01-.8-.484c-1.145-2.138-2.747-2.779-5.278-2.779h-.19v2.5a.742.742 0 01-.765.766 1.342 1.342 0 01-.9-.423z' fill='%23696969'/%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.099' height='12'%3E %3Cg data-name='Group 4'%3E %3Cpath data-name='Path 54' d='M6.939 11.235v-2.5h-.19c-2.531 0-4.133.641-5.278 2.779a.817.817 0 01-.8.483c-.346 0-.666-.314-.666-.876 0-4.833 2.047-7.847 6.749-7.847h.19V.805a.782.782 0 01.778-.8c.32 0 .517.164.89.471l5.16 4.827a.906.906 0 010 1.405l-5.163 4.868a1.367 1.367 0 01-.9.424.746.746 0 01-.77-.765z' fill='%23696969'/%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10.406' height='11.496'%3E %3Cg data-name='Group 5'%3E %3Cpath data-name='Path 55' d='M0 11.057V1.319A1.03 1.03 0 01.668.299a3.537 3.537 0 011.7-.3c2.174 0 3.527 1.061 5.59 1.061A10.948 10.948 0 009.792.814c.339 0 .609.181.609.5v5.947a1.033 1.033 0 01-.668 1.025 3.5 3.5 0 01-1.7.3c-2.063 0-3.422-1.06-5.59-1.06a4.029 4.029 0 00-1.559.275v3.258a.44.44 0 01-.445.439.447.447 0 01-.439-.441z' fill='%23696969'/%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.952' height='13.334'%3E %3Cg data-name='Group 6'%3E %3Cpath data-name='Path 56' d='M0 10.035c0-.634.639-1.2 1.19-1.768a3.614 3.614 0 00.584-2.062c.044-2.432.691-4.111 2.376-4.72a1.867 1.867 0 013.654 0c1.685.609 2.332 2.288 2.376 4.72a3.614 3.614 0 00.583 2.065c.545.563 1.19 1.134 1.19 1.768 0 .455-.361.766-.956.766H.956C.355 10.805 0 10.49 0 10.035zm4.035 1.627h3.883a1.963 1.963 0 01-3.883 0z' fill='%23696969'/%3E %3C/g%3E %3C/svg%3E");
  background-position: 14px 7px, 62px 6px, 157px 7px, 206px 7px, 240px 8px, 287px 7px, 322px 7px, 361px 7px, 407px 8px, 453px 7px;
}
html.dark .device-mail__toolbar:after {
  filter: invert(1) grayscale(100%) contrast(200%);
}
.device-mail__toolbar:before {
  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='42' height='27'%3E %3Cdefs%3E %3Cfilter id='a' x='0' y='0' width='42' height='27' filterUnits='userSpaceOnUse'%3E %3CfeOffset dy='.5'/%3E %3CfeGaussianBlur stdDeviation='.5' result='blur'/%3E %3CfeFlood flood-opacity='.278'/%3E %3CfeComposite operator='in' in2='blur'/%3E %3CfeComposite in='SourceGraphic'/%3E %3C/filter%3E %3C/defs%3E %3Cg filter='url(%23a)'%3E %3Cg data-name='Rectangle 241' transform='translate(2 1.5)' fill='%23fff' stroke='rgba(0,0,0,0.1)' stroke-width='.5'%3E %3Crect width='38' height='23' rx='3' stroke='none'/%3E %3Crect x='-.25' y='-.25' width='38.5' height='23.5' rx='3.25' fill='none'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='27'%3E %3Cdefs%3E %3Cfilter id='a' x='0' y='0' width='42' height='27' filterUnits='userSpaceOnUse'%3E %3CfeOffset dy='.5'/%3E %3CfeGaussianBlur stdDeviation='.5' result='blur'/%3E %3CfeFlood flood-opacity='.278'/%3E %3CfeComposite operator='in' in2='blur'/%3E %3CfeComposite in='SourceGraphic'/%3E %3C/filter%3E %3C/defs%3E %3Cg filter='url(%23a)'%3E %3Cg data-name='Rectangle 241' transform='translate(2 1.5)' fill='%23fff' stroke='rgba(0,0,0,0.1)' stroke-width='.5'%3E %3Crect width='38' height='23' rx='3' stroke='none'/%3E %3Crect x='-.25' y='-.25' width='38.5' height='23.5' rx='3.25' fill='none'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='27'%3E %3Cdefs%3E %3Cfilter id='a' x='0' y='0' width='42' height='27' filterUnits='userSpaceOnUse'%3E %3CfeOffset dy='.5'/%3E %3CfeGaussianBlur stdDeviation='.5' result='blur'/%3E %3CfeFlood flood-opacity='.278'/%3E %3CfeComposite operator='in' in2='blur'/%3E %3CfeComposite in='SourceGraphic'/%3E %3C/filter%3E %3C/defs%3E %3Cg filter='url(%23a)'%3E %3Cg data-name='Rectangle 241' transform='translate(2 1.5)' fill='%23fff' stroke='rgba(0,0,0,0.1)' stroke-width='.5'%3E %3Crect width='38' height='23' rx='3' stroke='none'/%3E %3Crect x='-.25' y='-.25' width='38.5' height='23.5' rx='3.25' fill='none'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='27'%3E %3Cdefs%3E %3Cfilter id='a' x='0' y='0' width='80' height='27' filterUnits='userSpaceOnUse'%3E %3CfeOffset dy='.5'/%3E %3CfeGaussianBlur stdDeviation='.5' result='blur'/%3E %3CfeFlood flood-opacity='.278'/%3E %3CfeComposite operator='in' in2='blur'/%3E %3CfeComposite in='SourceGraphic'/%3E %3C/filter%3E %3C/defs%3E %3Cg data-name='Group 39'%3E %3Cg filter='url(%23a)'%3E %3Cg data-name='Rectangle 241' transform='translate(2 1.5)' fill='%23fff' stroke='rgba(0,0,0,0.1)' stroke-width='..........完整代码请登录后点击上方下载按钮下载查看