未命名 GepG7vedit icon

作者：
藤原
Fork(复制)
图库
图片、视频、音频、图标
下载
嵌入
设置
BUG反馈
index.html
style.css
index.js
现在支持上传本地图片了！ 
            
            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>网站布局</title>
<style>
    /****************************************
   
    重置样式
    -----

    *****************************************/
    * {
      margin: 0;
      padding: 0;
      border: 0;
      outline: none;
      font-size: 100%;
      vertical-align: baseline;
      box-sizing: border-box;
    }

    *:focus,
    button,
    textarea,
    .forminput {
      border: none;
      outline: none !important;
    }

    textarea,
    .forminput {
      padding: 15px;
      background: RGBA(var(--lighterRGB), 0.75);
      border: solid 1px RGBA(var(--accentRGB), 0.5);
      border-radius: 5px;
      outline: none !important;
    }

    article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
      display: block;
    }

    ol,
    ul {
      list-style: none;
    }

    blockquote,
    q {
      quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
      content: "";
    }

    /*****************************
   
    隐藏损坏的链接和图片

    *****************************/
    img[src="<i>No Information</i>"],
    img[src=""],
    a[href="<i>No Information</i>"],
    a[href=""]:not([name]):not([onclick]) {
      display: none !important;
    }

    /*****************************
   
    调整表情符号大小

    *****************************/
    a[href*="javascript:emoticon"] img,
    div.postcolor img[alt*="https"],
    td[class*="post"] img[alt*="https"],
    a[href*="javascript:add_smilie"] img,
    #ucpcontent img[alt*="https"],
    div.box img[alt*="https"] {
      height: 20px;
    }

    /****************************************
   
    自定义字体支持

    *****************************************/

    @font-face {
      font-family: "Allover";
      src: url("https://assets.codepen.io/3254510/Allover+Modern+Regular.ttf")
        format("opentype");
    }

    @font-face {
      font-family: "Monotalic";
      src: url("https://files.jcink.net/uploads/homesick/Fonts/Monotalic_Regular.woff2")
        format("woff2");
    }

    /****************************************
   
    默认变量 - 浅蓝色主题

    *****************************************/
    :root {
      --accent: #7cb4d8; /* 主色调 - 浅蓝色 */
      --accentRGB: 124, 180, 216;
      --support: #93b8d9; /* 辅助色 - 浅蓝色 */
      --supportRGB: 147, 184, 217;

      --boardAccent: #;
      --boardAccentRGB: ;
      --boardSupport: #;
      --boardSupportRGB: ;

      --dark: #141414; /* 深色文本 */
      --darkRGB: 20, 20, 20;
      --darker: #;
      --darkerRGB: ;

      --border: #1c1a1a; /* 边框颜色 */

      --lighter: #dbdbdb; /* 浅色背景 */
      --lighterRGB: 219, 219, 219;
      --light: #cbcbcb; /* 浅色 */
      --lightRGB: 203, 203, 203;

      /* 主题切换时保持不变的颜色 */
      --darkest: #1c1a1a;
      --darkestRGB: 28, 26, 26;
      --lightest: #dbdbdb;
      --lightestRGB: 219, 219, 219;

      --fontSize: 1rem; /* 基础字体大小 */
      --fontBody: Quicksand; /* 正文字体 */
      --fontTitle: Allover; /* 标题字体 */
      --fontSubtitle: Monotalic; /* 副标题字体 */
    }

    /* 第二组的特定颜色 */
    .group-2 {
      --accent: #00627c !important;
      --accentRGB: 0, 98, 124 !important;
      --support: #2a7796 !important;
      --supportRGB: 42, 119, 150 !important;
    }

    /* 暗色主题变量 */
    [data-theme="dark"] * {
      --light: #333333;
      --lightRGB: 51, 51, 51;
      --lighter: #1d1d1d;
      --lighterRGB: 29, 29, 29;

      --darker: #dbdbdb;
      --darkerRGB: 219, 219, 219;
      --dark: #c3c3c3;
      --darkRGB: 195, 195, 195;
    }

    /*************************
   
    暗色/亮色主题切换

    *************************/

    #theme_switch_click #checkbox,
    #theme_switch_click > .light,
    #theme_switch_click > .dark {
      display: none;
    }

    /* 根据当前主题显示对应图标 */
    [data-theme="light"] #theme_switch_click > .light,
    [data-theme="dark"] #theme_switch_click > .dark {
      display: flex !important;
    }

    /****************************************
   
    基础样式

    *****************************************/
    body,
    html {
      margin: 0px;
      padding: 0px;
      scroll-behavior: smooth; /* 平滑滚动 */
      font: 500 var(--fontSize) / 150% var(--fontBody);
      color: var(--dark);
    }

    body {
      background-color: var(--light);
      background-image: url(https://files.jcink.net/uploads2/skinsbyoctober/bgDark.png),
        radial-gradient(circle at center, var(--light) 30%, var(--support) 110%);
      background-attachment: fixed;
    }

    a {
      text-decoration: none;
      cursor: crosshair; /* 十字光标 */
      color: var(--accent);
    }

    button {
      padding: 0px;
      margin: 0px;
      background: unset !important;
    }

    /****************************************
   
    外部容器

    *****************************************/

    #outerWrapper {
      position: relative;
      display: flex;
      flex-direction: row;
      width: clamp(320px, 100%, 1300px); /* 响应式宽度 */
      height: calc(100vh - 60px);
      background: var(--lighter);
      border: solid 3px var(--border);
      margin: 30px auto;
      overflow: hidden;
    }

    /**************************/
    /* 侧边栏样式 */
    aside#sidebar {
      display: flex;
      flex-direction: column;
      max-width: 60px;
      width: 100%;
      background: var(--accent);
      border-right: solid 1px var(--border);
    }

    aside#sidebar a {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 5px;
      border-bottom: solid 1px var(--border);
      height: 60px;
    }
    /* 第二组隐藏会员链接显示访客链接 */
    .group-2 aside#sidebar a.memberLink {
      display: none;
    }
    .group-2 aside#sidebar a.guestLink {
      display: flex !important;
    }

    /* 侧边栏滑动效果 */
    aside#sidebar .linkSlide {
      display: none;
      position: absolute;
      z-index: 2;
      top: -1px;
      right: -199px;
      align-items: center;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 800;
      color: var(--dark);
      padding: 0px 15px;
      width: 198px;
      height: 61px;
      background-image: linear-gradient(-90deg, var(--support), var(--light));
      border-top: solid 1px var(--border);
      border-bottom: solid 1px var(--border);
    }

    aside#sidebar a:hover .linkSlide {
      display: flex;
    }

    aside#sidebar a.navLink:hover .linkSlide {
      border-bottom: solid 2px;
    }

    /* 通知气泡样式 */
    aside#sidebar a.alert-0 .alert,
    aside#sidebar a.alert-0 .msg {
      display: none;
    }

    aside#sidebar a .alert,
    aside#sidebar a .msg {
      position: absolute;
      width: 15px;
      height: 15px;
      background-color: var(--support);
      border: solid 2px var(--border);
      border-radius: 50%;
    }

    aside#sidebar a .alert {
      top: 10px;
      right: 5px;
    }

    aside#sidebar a .msg {
      top: 15px;
      right: 15px;
    }

    /* 交替背景色 */
    aside#sidebar a:nth-child(odd) {
      background-color: RGBA(var(--lightRGB), 0.25);
    }

    aside#sidebar a.navLink {
      background-color: var(--support);
      border-bottom: solid 2px var(--border);
    }

    aside#sidebar a:hover {
      background-color: RGBA(var(--supportRGB), 0.25);
    }

    aside#sidebar a.navLink:hover {
      background-color: RGBA(var(--lightRGB), 0.25);
    }

    aside#sidebar img {
      width: 35px;
      mix-blend-mode: luminosity; /* 混合模式 */
    }

    aside#sidebar a:hover img {
      width: 38px; /* 悬停时放大图标 */
    }

    /*************************/
    /* 会员栏样式 */
    aside#memberBar {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      max-width: 200px;
      width: 100%;
      background: var(--light);
      border-right: solid 2px var(--border);
    }

    #memberBar #userInfo {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 10px;
      background-color: var(--lighter);
      line-height: 100%;
      height: 60px;
      font-weight: 800;
      padding: 5px 15px;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
      border-bottom: solid 2px var(--border);
    }

    #memberBar #userInfo b,
    #memberBar #userInfo b a {
      font-size: 16px;
      font-weight: 800;
      color: var(--dark);
      font-family: var(--fontTitle);
      text-shadow: 0px 1px 5px var(--accent);
      text-transform: uppercase;
    }

    #memberBar #userAvatar {
      position: relative;
      overflow: hidden;
      background-color: var(--support);
      border-top: solid 2px;
    }

    #memberBar #userAvatar img {
      display: block;
      aspect-ratio: 5 / 9; /* 固定宽高比 */
      max-width: 198px;
      object-fit: cover;
      mix-blend-mode: hard-light;
    }

    #memberBar #userAvatar .userAvatarGradient {
      position: absolute;
      bottom: 0px;
      width: 100%;
      height: 50%;
      background-image: linear-gradient(0deg, var(--accent), transparent);
    }

    /*************************/
    /* 顶部导航栏样式 */
    nav#topbar {
      position: sticky;
      top: -30px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 15px;
      padding: 15px;
      height: 60px;
      text-transform: uppercase;
      font-size: 13px;
      font-weight: 500;
      background-color: var(--light);
      background-image: linear-gradient(-90deg, var(--support), transparent);
      width: calc(100%);
      border-bottom: solid 2px;
    }

    #topbar a {
      max-width: 100px;
      white-space: nowrap;
      text-overflow: ellipsis; /* 文本溢出显示省略号 */
      overflow: hidden;
      color: var(--dark);
      font-weight: 800;
    }

    #topbar a:hover {
      max-width: 100%;
      overflow: unset;
    }

    /*************************/
    /* 内容区域样式 */
    content#contentSection {
      display: block;
      width: 100%;
      height: 100%;
    }

    #contentSection #boardWrapper {
      position: relative;
      height: calc(100% - 60px);
      padding: 30px;
      overflow: auto;
    }

    nav#navBar {
      display: flex;
      flex-direction: column;
      max-width: 60px;
      width: 100%;
      background: var(--light);
      border-left: solid 2px;
    }

    /******************************/
    /* 页面头部样式 */
    #boardHeader {
      position: relative;
      width: 100%;
      height: 500px;
      background-color: var(--light);
      background-image: radial-gradient(
        circle at center,
        var(--light) 30%,
        var(--support) 110%
      );
      border: solid 1px var(--border);
    }

    #boardHeader .focal {
      position: absolute;
      border: solid 1px;
    }

    #boardHeader .focal.foreground {
      top: 20%;
      left: 10%;
      width: 50%;
      height: 20%;
      background: var(--accent);
    }

    #boardHeader .focal.background {
      z-index: 1;
      top: 30%;
      left: 20%;
      width: 70%;
      height: 40%;
      background: var(--support);
      background-image: url(https://files.jcink.net/uploads2/skinsbyoctober/bgDark.png);
      border-bottom: solid 30px var(--dark);
    }

    #boardHeader img {
      position: Absolute;
      z-index: 3;
      top: -30px;
    }

    /****************************************
   
    移动端响应式设计

    *****************************************/
    @media screen and (max-width: 768px) {
      /* 调整整体布局为垂直方向 */
      #outerWrapper {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        margin: 0;
        border: none;
      }

      /* 侧边栏调整为水平方向 */
      aside#sidebar {
        max-width: 100%;
        height: 60px;
        flex-direction: row;
        border-right: none;
        border-bottom: solid 1px var(--border);
      }

      aside#sidebar a {
        height: 60px;
        border-bottom: none;
        border-right: solid 1px var(--border);
      }

      /* 调整滑动效果 */
      aside#sidebar .linkSlide {
        top: 60px;
        right: unset;
        left: 0;
        width: 100%;
        border-top: none;
      }

      /* 会员栏调整为顶部显示 */
      aside#memberBar {
        max-width: 100%;
        height: auto;
        border-right: none;
        border-bottom: solid 2px var(--border);
      }

      #memberBar #userInfo {
        height: 50px;
        padding: 5px 10px;
      }

      #memberBar #userAvatar {
        display: none; /* 移动端隐藏头像 */
      }

      /* 顶部导航栏调整 */
      nav#topbar {
        position: relative;
        top: 0;
        flex-wrap: wrap;
        height: auto;
        padding: 10px;
        gap: 10px;
      }

      #topbar a {
        max-width: 80px;
        font-size: 12px;
      }

      /* 内容区域调整 */
      #contentSection #boardWrapper {
        padding: 15px;
        height: auto;
      }

      #boardHeader {
        height: 300px;
      }

      #boardHeader img {
        max-width: 100%;
        height: auto;
        top: 0;
      }
    }

    @media screen and (max-width: 480px) {
      /* 进一步调整小屏幕布局 */
      aside#sidebar {
        height: 50px;
      }

      aside#sidebar a {
        height: 50px;
      }

      aside#sidebar img {
        width: 25px;
      }

      aside#sidebar a:hover img {
        width: 28px;
      }

      #memberBar #userInfo {
        font-size: 10px;
      }

      #memberBar #userInfo b,
      #memberBar #userInfo b a {
        font-size: 14px;
      }

      #topbar a {
        max-width: 60px;
        font-size: 10px;
      }

      #boardHeader {
        height: 200px;
      }
    }
</style>
</head>
<body class="group-4">
  <!-- 引入外部资源 -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
  <script src="https://kit.fontawesome.com/861f1891b3.js" crossorigin="anonymous"></script>
  <script type='text/javascript' src='//files.jcink.net/html/jquery-1.7.2.min.js'></script>
  
  <!-- 主题切换脚本 -->
  <script>
    // 检查并应用存储的主题设置
    const currentTheme = localStorage.getItem("theme");
    if (currentTheme) {
      document.documentElement.setAttribute("data-theme", currentTheme);
    } else {
      // 默认使用亮色主题
      const defaultTheme = "light";
      document.documentElement.setAttribute("data-theme", defaultTheme);
      localStorage.setItem("theme", defaultTheme);
    }
    
    // 主题切换功能
    if (localStorage.getItem("theme") === "light") {
      $('#checkbox').prop('checked', true)
    }
    var themeToggle = document.querySelector(
      '.theme-switch input[type="checkbox"]'
    );

    function switchTheme(e) {
      console.log(themeToggle)
      if (e.target.checked) {
        document.documentElement.setAttribute("data-theme", "light");
        localStorage.setItem("theme", "light");
      } else {
        document.documentElement.setAttribute("data-theme", "dark");
        localStorage.setItem("theme", "dark");
      }
    }
    themeToggle.addEventListener("change", switchTheme, false);
  </script>

  <!-- 页面主体结构 -->
  <wrapper id="outerWrapper">
    <!-- 左侧边栏 -->
    <aside id="sidebar">
      <a href="#" class="navLink">
        <img src="https://cdn-icons-png.flaticon.com/128/2892/2892320.png">
        <span class="linkSlide">导航</span>
      </a>
      <a href="#" class="neutralLink">
        <img src="https://cdn-icons-png.flaticon.com/128/3010/3010995.png">
        <span class="linkSlide">首页</span>
      </a>
      <a href="#" class="memberLink">
        <img src="https://cdn-icons-png.flaticon.com/128/738/738853.png">
        <span class="linkSlide">账户设置</span>
      </a>
      <a href="#" class="memberLink">
        <img src="https://cdn-icons-png.flaticon.com/128/3557/3557963.png">
        <span class="linkSlide">切换账户</span>
      </a>
      <a href="#" class="memberLink alert-1">
        <img src="https://cdn-icons-png.flaticon.com/128/8950/8950541.png">
        <span class="linkSlide">1条消息</span>
        <span class="alert"></span>
      </a>
      <a href="#" class="memberLink alert-1">
        <img src="https://cdn-icons-png.flaticon.com/128/819/819559.png">
        <span class="linkSlide">1条通知</span>
        <span class="msg"></span>
      </a>
      <a href="#" class="memberLink">
        <img src="https://cdn-icons-png.flaticon.com/128/3094/3094700.png">
        <span class="linkSlide">登出</span>
      </a>
      <a href="#" class="guestLink" style="display:none;">
        <img src="https://cdn-icons-png.flaticon.com/128/3094/3094700.png">
        <span class="linkSlide">登录</span>
      </a>
      <a href="#" class="guestLink" style="display:none;">
        <img src="https://cdn-icons-png.flaticon.com/128/3094/3094700.png">
        <span class="linkSlide">注册</span>
      </a>
    </aside>
    
    <!-- 会员信息栏 -->
    <aside id="memberBar">
      <div id="userInfo">
        欢迎回来,
        <b><a href="#">October</a></b>
      </div>
      <div id="userAvatar">
        <img src="https://files.jcink.net/uploads2/storytelling//av-28.png">
        <div class="userAvatarGradient"></div>
      </div>
    </aside>
    
    <!-- 主内容区域 -->
    <content id="contentSection">
      <nav id="topbar">
        <a href="#"> 我将向你展示一切 </a>
        <a href="#"> 面纱背后的真相</a>
        <a href="#"> 我将给你一切</a>
      </nav>
      <div id="boardWrapper" style="--accent: #00627c; --accentRGB: 0, 98, 124; --support: #2a7796; --supportRGB: 42, 119, 150;">

        <div id="boardHeader">
          <div class="focal foreground"></div>
          <div class="focal background"></div>
          <img src="https://s6.gifyu.com/images/bzsXp.webp">
        </div>
      </div>
    </content>
  </wrapper>
</body>
</html>
预览
控制台