用心.發現

這是一個測試的網頁

用心.發現-avatar-img
用心.發現
更新 發佈閱讀 14 分鐘
<!DOCTYPE html>
<html lang="zh-TW">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>空白</title>
    <style>
      :root {
          --primary-color: #007BFF;
          --secondary-color: #6c757d;
          --bg-color: #f8f9fa;
          --text-color: #343a40;
          --white-color: #ffffff;
          --transition-speed: 0.3s;
      }

      body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          margin: 0;
          padding: 0;
          background-color: var(--bg-color);
          color: var(--text-color);
          display: flex;
          flex-direction: column;
          height: 100vh;
          overflow: hidden;
      }

      .top-bar {
          background-color: var(--primary-color);
          color: var(--white-color);
          padding: 15px 20px;
          text-align: center;
          font-size: 1.5rem;
          font-weight: bold;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          position: sticky;
          top: 0;
          z-index: 1000;
      }

      .container {
          display: flex;
          flex: 1;
          overflow: hidden;
      }

      .left-content {
          width: 250px;
          background-color: var(--white-color);
          padding: 20px;
          box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
          transition: width var(--transition-speed) ease;
          flex-shrink: 0;
      }

      .left-content h2 {
          color: var(--primary-color);
          margin-top: 0;
          border-bottom: 2px solid var(--primary-color);
          padding-bottom: 10px;
      }

      .left-content ul {
          list-style-type: none;
          padding: 0;
          margin-top: 20px;
      }

      .left-content li {
          margin-bottom: 10px;
      }

      .left-content a {
          display: block;
          padding: 10px 15px;
          text-decoration: none;
          color: var(--text-color);
          border-radius: 5px;
          transition: background-color var(--transition-speed), color var(--transition-speed);
      }

      .left-content a:hover {
          background-color: var(--primary-color);
          color: var(--white-color);
          transform: translateX(5px);
      }

      .main-content {
          flex-grow: 1;
          padding: 40px;
          overflow-y: auto;
          display: flex;
          flex-direction: column;
          gap: 20px;
      }

      .content-section {
          background-color: var(--white-color);
          padding: 30px;
          border-radius: 8px;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
          opacity: 0;
          transform: translateY(20px);
          transition: opacity 0.5s ease, transform 0.5s ease;
      }

      .content-section.active {
          opacity: 1;
          transform: translateY(0);
      }

      .content-section h1 {
          color: var(--primary-color);
          font-size: 2rem;
          border-bottom: 1px solid #dee2e6;
          padding-bottom: 10px;
          margin-top: 0;
      }

      .content-section p {
          line-height: 1.8;
          color: var(--secondary-color);
          font-size: 1.1rem;
      }
    </style>
  </head>
  <body>
    <div class="top-bar">你好這是一個互動式網頁</div>

    <div class="container">
      <div class="left-content">
        <h2>目錄</h2>
        <ul>
          <li><a href="#" data-target="about-us">關於我們</a></li>
          <li><a href="#" data-target="process">製作過程</a></li>
          <li><a href="#" data-target="contact">聯繫我們</a></li>
        </ul>
      </div>
      <div class="main-content">
        <div id="about-us" class="content-section active">
          <h1>關於我們</h1>
          <p>
            成立於2030年9月1日，組織成立專門蒐集並驗證上古高科技文明存在之事實。
            <br /><br />
            我們致力於透過跨學科研究，包含考古學、物理學與歷史文獻分析，揭開過去被遺忘的文明面貌，並將這些珍貴的知識傳承給下一代。
          </p>
        </div>
        <div id="process" class="content-section">
          <h1>製作過程</h1>
          <p>
            本網頁採用純HTML、CSS和JavaScript製作，無需外部套件。其特點為輕量、可離線查看，並透過CSS的過渡效果與JavaScript的事件監聽，實現平滑的互動體驗。
            <br /><br />
            我們注重使用者介面的簡潔與流暢性，旨在提供一個清晰且易於導航的閱讀環境。
          </p>
        </div>
        <div id="contact" class="content-section">
          <h1>聯繫我們</h1>
          <p>
            若您有任何疑問或想提供相關線索，請透過以下方式與我們聯繫：
            <br /><br />
            電子郵件：[email protected]
            <br />
            電話：(02) 1234-5678
          </p>
        </div>
      </div>
    </div>

    <script>
      document.addEventListener('DOMContentLoaded', function() {
          const navLinks = document.querySelectorAll('.left-content a');
          const sections = document.querySelectorAll('.content-section');

          navLinks.forEach(link => {
              link.addEventListener('click', function(e) {
                  e.preventDefault();

                  // 移除所有區塊的 active class
                  sections.forEach(section => {
                      section.classList.remove('active');
                  });

                  // 取得目標區塊的 ID
                  const targetId = this.getAttribute('data-target');
                  const targetSection = document.getElementById(targetId);

                  // 為目標區塊新增 active class
                  if (targetSection) {
                      targetSection.classList.add('active');
                  }
              });
          });
      });
    </script>
  </body>
</html>
    含 AI 應用內容
留言
avatar-img
用心.發現
1會員
7內容數
生活.樸實.分享.發現.用心
用心.發現的其他內容
2025/06/12
2025 年學習AI知識與延伸的機械學習_初步心得與入門導讀
1.入門導讀： AI知識理論與機械學習入門：適合有興趣想跨領域學習的任何人，但需具備微積分入門程度（其餘限制不大） 2.重新了解目前的AI技術： （截至2025.6.12） 它是一個人類未來的終極目標，希望能夠解決人類疑難雜症於一體大全，但以目前發展與使用狀態下，屬於扮演一個有力的助手 但
2025/06/12
2025 年學習AI知識與延伸的機械學習_初步心得與入門導讀
1.入門導讀： AI知識理論與機械學習入門：適合有興趣想跨領域學習的任何人，但需具備微積分入門程度（其餘限制不大） 2.重新了解目前的AI技術： （截至2025.6.12） 它是一個人類未來的終極目標，希望能夠解決人類疑難雜症於一體大全，但以目前發展與使用狀態下，屬於扮演一個有力的助手 但
2024/09/17
月相關的浪漫含義日文中與日常中的感觸
關於月（tsuki) GPTx人工再整理 在日本文化中，月亮常常被賦予浪漫、神秘的意涵，因此成為許多告白場景的背景。這種連結源遠流長，並在文學、藝術、以及現代流行文化中都有所體現。 為什麼是月亮？ * 意境深遠： 月亮象徵著孤獨、思念、以及對遠方或未來的憧憬。這樣的意境非常適合表達含蓄
Thumbnail
2024/09/17
月相關的浪漫含義日文中與日常中的感觸
關於月（tsuki) GPTx人工再整理 在日本文化中，月亮常常被賦予浪漫、神秘的意涵，因此成為許多告白場景的背景。這種連結源遠流長，並在文學、藝術、以及現代流行文化中都有所體現。 為什麼是月亮？ * 意境深遠： 月亮象徵著孤獨、思念、以及對遠方或未來的憧憬。這樣的意境非常適合表達含蓄
Thumbnail
2024/09/17
祝福月圓人團圓（人不要吃圓）
祝福月圓人團圓（人不要吃圓） ===== 引用來自日本文學中帶來的 今夜は月が綺麗です 暗示著告白 （另有感觸處：也有關係美好的低調情意） 在中華地區則有： 月有陰晴圓缺 （事態變化無常、人的情感變化） 在地球上，月與太陽的關係密不可分，沒有太陽的照耀就無法於黑夜中顯現 然，即使沒
Thumbnail
2024/09/17
祝福月圓人團圓（人不要吃圓）
祝福月圓人團圓（人不要吃圓） ===== 引用來自日本文學中帶來的 今夜は月が綺麗です 暗示著告白 （另有感觸處：也有關係美好的低調情意） 在中華地區則有： 月有陰晴圓缺 （事態變化無常、人的情感變化） 在地球上，月與太陽的關係密不可分，沒有太陽的照耀就無法於黑夜中顯現 然，即使沒
Thumbnail
看更多