div+css实现大气简洁tab选项卡横竖切换页面代码-html代码-BFW代码库

代码语言：html

代码描述：div+css实现大气简洁tab选项卡横竖切换页面代码

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;300&display=swap');
@import url('https://fonts.cdnfonts.com/css/agencyfb-2');



/* RESET ---------------------------------- */

*:before, *:after, *, ::after, ::before {box-sizing: border-box;}
body {padding: 0; margin: 0;}



/* THEMES ---------------------------------- */

/* Default */
:root {
  --bg: 19,20,23,1.0;
  --bg-02: 39,49,54,1.0;
  --bg-grd: linear-gradient(180deg, rgba(50,70,80,0.9) 0, #0d101b 100%);
  --bg-active: 48,190,255,0.2;
  --bg-panel: 255,255,255,0.03;
  --txt: 255,255,255,0.7;
  --txt-active: 255,255,255,1.0;
  --txt-muted: 255,255,255,0.5;
  --txt-shadow: -1px 1px rgba(0,0,0,1.0);
  --accent: 48,190,255,1.0;
}

/* Light */
:root:has(#toggleTheme:checked) {
  --bg: 0,0,0,0.8;
  --bg-02: 0,0,0,0.5;
  --bg-grd: linear-gradient(180deg, rgba(255,255,255,0.8) 0, rgba(255,255,255,0.5) 100%);
  --bg-active: 48,190,255,0.2;
  --bg-panel: 255,255,255,0.1;
  --txt: 0,0,0,0.8;
  --txt-active: 0,0,0,1.0;
  --txt-muted: 0,0,0,0.5;
  --txt-shadow: -1px 1px 0 rgba(255,255,255,0.5);
}

/* LAYOUT ---------------------------------- */

/* Default / Horizontal */
:root {
  --display: grid;
  --grid-template-rows: auto 1fr auto;
  --grid-template-columns: 16rem 1fr auto 10rem;
  --grid-auto-flow: row;
  --gap: 1rem;
  --resize: horizontal;
  --min-width: 10rem;
  --max-width: calc(100vw - 45rem);
  --nth-child: ;
}
/* Vertical */
:root:has(#toggleLayout:checked) {
  --display: none;
  --grid-template-columns: 1fr;
  --grid-template-rows: auto auto 1fr auto auto auto;
  --grid-auto-flow: column;
  --gap: 1rem;
  --resize: none;
  --min-width: 100%;
  --max-width: none;
  --grid-auto-flow_tab: row;
}


/* SCAFFOLDING ---------------------------------- */

/* PANEL WRAPPER */
app-container {
  display: grid;
  grid-template-rows: var(--grid-template-rows);
  grid-template-columns: var(--grid-template-columns);
  gap: var(--gap);
  padding: 1rem;
  height: 100vh; /* push HEADER/FOOTER to the top/bottom of viewport */
  overflow: hidden;
}

app-container:has(:nth-child(5):nth-last-child(2)) app-panel:nth-child(3) {
  resize: var(--resize);
  min-width: var(--min-width);
  /* set a max value to keep a minimum width for meta column */
  max-width: var(--max-width); 
}

/* ALL PANELS */
app-panel {
  display: grid;
  background-color: rgba(var(--bg-panel));
  border-radius: .3rem;
  overflow: hidden;
  align-content: start;
  transition: background-color 250ms;
}

/* HEADER/FOOTER PANELS */
app-panel:first-of-type,
app-panel:last-of-type {
  grid-template-columns: 1fr auto auto;
  grid-column: 1 / -1;
}

/* SCROLLABLE */
panel-list {
  display: grid;
  grid-auto-flow: var(--grid-auto-flow);
  overflow: auto;
}

panel-tab panel-list {grid-auto-flow: var(--grid-auto-flow_tab)}

/* If there is 1 column */
label,  
list-item,
panel-header {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
}
panel-header {
  display: var(--display);
}
/* If there are 2 COLUMNS */
app-panel label:has(> :last-child:nth-child(2)),  
app-panel list-item:has(> :last-child:nth-child(2)),
app-panel panel-header:has(> :last-child:nth-child(2)) {
  grid-template-columns: auto 1fr;
}
/* If there are 3 COLUMNS */
app-panel label:has(> :last-child:nth-child(3)),  
app-panel list-item:has(> :last-child:nth-child(3)),
app-panel panel-header:has(> :last-child:nth-child(3)) {
  grid-template-columns: 1fr auto auto;
}
/* If there are 4 COLUMNS */
app-panel label:has(> :last-child:nth-child(4)),  
app-panel list-item:has(> :last-child:nth-child(4)),
app-panel panel-header:has(> :last-child:nth-child(4)) {
  grid-template-columns: auto 1fr auto auto;
}

app-panel label:hover,
app-panel label:has(> input:checked) {
  background-color: rgba(var(--bg-active));
  color: rgba(var(--txt-active));
}

list-cell {padding: .5rem;}

app-panel input {
  display: none;
  /* accent-color: rgba(var(--accent)); */
}

app-panel panel-header {padding: 1.0rem;}

app-panel p {padding: 0 1rem;}

app-panel meta-data {
  font-size: 0.8rem;
  opacity: 0.5;
  font-stretch: 100;
  font-style: italic;
  letter-spacing: 0.04rem;
}

app-panel:nth-of-type(2) label[for="radio02"]:has(input:checked) + app-panel:has(panel-list label[for="list02Item01"]) {
	display: grid;
}

powered-by,
app-logo {padding: 1rem;}

/* TABS ---------------------------------- */

panel-tab {overflow: hidden;}

app-panel:nth-of-type(3) panel-tab {display: none;}

app-panel:nth-of-type(2):has(#radio01:checked) ~ app-panel:nth-of-type(3) #tab01,
app-panel:nth-of-type(2):has(#radio02:checked) ~ app-panel:nth-of-type(3) #tab02,
app-panel:nth-of-type(2):has(#radio03:checked) ~ app-panel:nth-of-type(3) #tab03,
app-panel:nth-of-type(2):has(#radio04:checked) ~ app-panel:nth-of-type(3) #tab04,
app-panel:nth-of-type(2):has(#radio05:checked) ~ app-panel:nth-of-type(3) #tab05 {display: grid;}



/* LOOK/FEEL ---------------------------------- */

body {
  background-color: rgba(var(--bg));
  color: rgba(var(--txt));
  font-family: 'Oxanium', sans-serif;
  font-size: 1rem;
  text-shadow: var(--txt-shadow);
  transition: background-color 250ms, color 250ms;
}
html:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: -5;
  background: var(--bg-grd);
}
body:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  background-attachment: initial;
  background-color: transparent;
  background-image: url('//repo.bfw.wiki/bfwrepo/icon/637976b313df0.png');
  background-size: 4.6875rem;
  background-repeat: repeat;
  z-index: -5;
}
html:after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: -10;
  height: 100vh;
  background-color: rgba(var(--bg-02));
  background-image: url('//repo.bfw.wiki/bfwrepo/icon/637977059b93a.png');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: inherit;
  /* background-size: cover; */
  background-size: 75% 75%;
  /* transition: all 250ms linear; */
}



/* SCROLLBARS ---------------------------------- */

  *::-webkit-scrollbar {display: block; width: 1rem;}
  *::-webkit-scrollbar-button {display: none;}
  *::-webkit-scrollbar-track {background-color: rgba(48,190,255,0.0);}
  *::-webkit-scrollbar-track-piece {background-color: rgba(48,190,255,0.0);}
  * {--scrollbar-color: rgba(48,190,255,0.0);}
  *:hover, *:focus, *:focus-within {--scrollbar-color: rgba(var(--bg-active)) !important;}
  *::-webkit-scrollbar-thumb {
    background-color: rgba(48,190,255,0.0);
    border: 5px solid transparent;
    border-radius: 1.5rem;
    box-shadow: 0.25rem 0 0 0.25rem var(--scrollbar-color) inset;
  }
  *::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-color);
    border: 0 solid transparent;
    box-shadow: none;
  }

  /* FIREFOX */
  /* Target elements, not :root{} */
  /* https://codeconvey.com/custom-scrollbar-css-for-all-browsers/ */
  panel-list,
  app-panel-scroll {
    scrollbar-color: rgba(48,190,255,0.0) rgba(48,190,255,0.0); /* Thumb and track color */
    scrollbar-width: thin; /* Track width */
    transition: scrollbar-color 250ms;
  }
  panel-list:hover {scr.........完整代码请登录后点击上方下载按钮下载查看