30天做出一個線上相簿

html

yuuuun 2025-09-18 22:16:28 ‧ 187 瀏覽

分享至

Day 2 成果報告

主題：統一排版與主題色設計

一、學習目標

在第二天的任務中，我的目標是讓整個網頁的排版更有一致性，並透過主題色統一整個視覺感。這有助於提升可讀性與設計感，使後續加入圖片或互動功能時，不會顯得雜亂。

二、過程與方法

我新增了 CSS 變數，集中管理顏色設定，讓背景、文字、邊框和按鈕樣式都能快速統一修改。同時，利用Flexbox排版確保頁面元素能自適應不同螢幕大小，提升響應式設計的效果。

三、實作成果

最終的成果是一個整齊又清爽的首頁，標題顯眼、段落間距合理，整體視覺和諧。這次的排版讓網站結構更加穩固，也方便日後加入功能模組。

四、主要程式碼區塊

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day2 - 基礎樣式與結構優化</title>
  <style>
    /*全域主題變數：確保每一天的設計一致*/
    :root {
      --bg: #ffffff;
      --primary: darkorange;
      --accent: coral;
      --text: #333;
      --muted: #777;
      --border: #e6e6e6;
      --btn: #ff8c42;
      --btn-hover: #ff6a00;
      --card-bg: #fff;
    }

    /*全域樣式設定*/
    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      margin: 20px;
      text-align: center;
      line-height: 1.6;
    }

    h1 {
      color: var(--primary);
      text-shadow: 2px 2px #ddd;
    }

    p {
      font-size: 18px;
      color: var(--accent);
    }

    /*相簿框架排版*/
    #gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 15px;
      margin-top: 20px;
    }

    /*單張相片卡片樣式*/
    .photo-card {
      background-color: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    }

    .photo-card img {
      width: 100%;
      border-radius: 8px;
      border: 2px solid #ddd;
    }

    /*上傳按鈕樣式*/
    .upload-btn {
      background-color: var(--btn);
      color: white;
      border: none;
      border-radius: 8px;
      padding: 10px 20px;
      cursor: pointer;
      font-size: 16px;
      transition: 0.3s;
      margin-top: 10px;
    }

    .upload-btn:hover {
      background-color: var(--btn-hover);
    }

  </style>
</head>
<body>

  <h1>🌟 我的第二天線上相簿 🌟</h1>
  <p>Day2：建立初步的結構與統一樣式。</p>

  <!-- 圖片上傳 -->
  <input type="file" id="upload" accept="image/*" class="upload-btn">

  <!-- 圖片顯示區 -->
  <div id="gallery"></div>

  <script>
    const upload = document.getElementById("upload");
    const gallery = document.getElementById("gallery");

    // 當使用者上傳圖片時執行
    upload.addEventListener("change", function() {
      gallery.innerHTML = ""; // 清空舊圖片
      const file = this.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function(e) {
          const img = document.createElement("img");
          img.src = e.target.result;

          const card = document.createElement("div");
          card.classList.add("photo-card");
          card.appendChild(img);
          gallery.appendChild(card);
        };
        reader.readAsDataURL(file);
      }
    });

    console.log("Day2：基本樣式與結構設定完成。");
  </script>

</body>
</html>