30天做出一個AR網站

html

yuuuun 2025-09-20 23:37:59 ‧ 36 瀏覽

分享至

Day 4 學習報告 – CSS 排版設計

今日目標

學習 CSS Flexbox 的基本用法。
製作一個有「標題區、內容區、側邊欄、底部」的網頁版面。
預先建立版型，為未來圖片上傳與 AR 顯示功能鋪路。

學習內容

Flexbox 基本概念
- display: flex;：讓父層成為彈性容器。
- flex: 數字;：設定子項目的佔比。
- justify-content、align-items：控制子元素排列方式。
版面設計
- 頁首 (Header)：顯示標題。
- 主要內容區 (Content)：放文章與圖片。
- 側邊欄 (Sidebar)：放功能按鈕。
- 頁尾 (Footer)：顯示版權資訊。

今日程式碼

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>Day 4 - CSS 排版</title>
  <style>
    body {
      margin: 0;
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      background-color: #f9f9f9;
    }

    /* 頁首 */
    header {
      background-color: #4aa3df;
      color: white;
      padding: 20px;
      text-align: center;
      font-size: 24px;
    }

    /* 主要內容區 (內容 + 側邊) */
    main {
      display: flex; /* 啟用 Flexbox */
      margin: 20px;
    }

    /* 內容區 */
    .content {
      flex: 3; /* 占 3 份 */
      background: white;
      padding: 20px;
      margin-right: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    /* 側邊欄 */
    .sidebar {
      flex: 1; /* 占 1 份 */
      background: #e6f3fb;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      text-align: center;
    }

    .sidebar button {
      padding: 10px 15px;
      background-color: #ff7f50;
      border: none;
      border-radius: 8px;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s;
    }

    .sidebar button:hover {
      background-color: #ff4500;
    }

    /* 頁尾 */
    footer {
      background-color: #333;
      color: white;
      text-align: center;
      padding: 15px;
      margin-top: 20px;
    }

    img {
      max-width: 100%;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <header>
    🌟 我的第四天網頁 🌟
  </header>

  <main>
    <!-- 內容區 -->
    <div class="content">
      <h2>主要內容區</h2>
      <p>這裡可以放文章、圖片，未來我們會放上 AR 內容。</p>
      <img src="https://picsum.photos/500/300" alt="隨機圖片">
    </div>

    <!-- 側邊欄 -->
    <div class="sidebar">
      <h2>側邊欄</h2>
      <p>這裡可以放上工具，例如圖片上傳按鈕。</p>
      <button onclick="alert('上傳功能即將到來！')">選擇圖片</button>
    </div>
  </main>

  <footer>
    © 2025 我的學習網站 - Day 4
  </footer>
</body>
</html>