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