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

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

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