30天做出一個線上相簿

html

yuuuun 2025-09-22 22:32:45 ‧ 98 瀏覽

分享至

Day 6 學習報告

主題：圖片上傳介面美化

一、學習目標

學習如何使用 Flexbox 製作雙欄版面。
美化圖片上傳的介面，讓操作更直覺。
增加「圖片預覽」區塊，並改善版面排版。

二、學習內容

Flexbox 雙欄排版
- 使用 .container { display: flex; } 讓內容可以左右並排。
- 左邊為「圖片上傳區」，右邊為「圖片預覽區」。
- 使用 gap: 20px; 增加間距，讓排版更清楚。
自訂檔案上傳按鈕
- 預設的 <input type="file"> 樣式不好看。
- 用 label for="upload" 搭配 input[type="file"] { display: none; }，就能用自訂樣式取代原生按鈕。
- 設計 .custom-button，加上顏色、圓角、hover 效果。
圖片預覽區設計
- 用 .preview-box 包住 <img>，並加上白底、陰影、圓角。
- 預設 display: none;，只有在圖片載入後才顯示。
- 使用 JavaScript preview.style.display = "block"; 讓圖片出現。

三、學習內容

以下是完整的Day6成果：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day6 - 圖片上傳界面美化</title>
    <style>
      body {
        font-family: "Microsoft JhengHei", Arial, sans-serif;
        background-color: #f3f8fc;
        margin: 20px;
      }

      h1 {
        text-align: center;
        color: #2b7cbf;
      }

      .container {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        gap: 20px;
        max-width: 900px;
        margin: 0 auto;
      }
      /* 左側:上傳區 */
      .upload-box{
        flex: 1;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
      }

      .upload-box input[type="file"] {
        display: none; /* 隱藏原始按鈕 */
      }

      .custom-button {
        display: inline-block;
        padding: 12px 25px;
        background: #4aa3df;
        color: white;
        font-size: 16px;
        font-weight: bold;
        border-radius: 8px;
        cursor: pointer;
        transition: 0.3s;
      }

      .custom-button:hover {
        background: #2b7cbf;
      }

      /* 右側:預覽區 */
      .preview-box {
        flex: 1;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        text-align: center;
      }

      .preview-box img {
        max-width: 100%;
        max-height: 400px;
        margin-top: 15px;
        border-radius: 10px;
        border: 2px solid #ddd;
        display: none;
      }
      </style>
      </head>
      <body>
        <h1>🌟 我的第六天網頁 🌟</h1>

        <div class="container">
            <!-- 上傳區-->
             <div class="upload-box">
            <h2>圖片上傳</h2>
            <p>請點擊下方按鈕，選擇一張圖片:</p>

            <!-- 自訂上傳按鈕-->
            <label for="upload" class="custom-button">選擇圖片</label>
            <input type="file" id="upload" accept="image/*">
        </div>

        <!-- 預覽區 -->
         <div class="preview-box">
            <h2>圖片預覽</h2>
            <img id="preview" src="" alt="預覽圖片">
         </div>
        </div>
        
        
        <script>
            const upload= document.getElementById("upload");
            const preview=document.getElementById("preview");

            upload.addEventListener("change", function() {
                const file = this.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        preview.src = e.target.result;
                        preview.style.display="block";

                    }
                    reader.readAsDataURL(file);
                }
            });
        
        </script>
      </body>
      </html>