30天做出一個AR網站

html

yuuuun 2025-09-19 21:07:02 ‧ 51 瀏覽

分享至

Day3成果報告

主題:學習用CSS設計網頁外觀

一、學習目標

在專案的第二天，目標是學習**CSS（層疊樣式表)**的基礎語法，並應用在網頁上，讓頁面更有設計感。重點放在文字樣式、背景顏色、圖片樣式，以及按鈕的互動效果。

二、學習內容

1.CSS的作用

HTML負責結構，就像建築的骨架。
CSS負責樣式，就像室內設計師，讓房子變得美觀。

今天使用到的CSS功能：
- 字體與段落：設定字型、字體大小與顏色。
- 背景顏色：改變整個頁面的背景。
- 圖片樣式：加上邊框與圓角，讓圖片更有質感。
- 按鈕設計：使用hover增加互動感（滑鼠移上去顏色會有變化）。
CSS撰寫位置
- 今天採用內部樣式（<style>)，方便直接練習。
- 之後可以拆分成外部CSS檔案，讓管理更清晰。

三、成果展示

以下是完整的Day3成果：

<!DOCTYPE html>
<html lang= "zh-Hant">
<head>
  <meta charset = "UTF-8">
  <title>Day 3 - CSS 練習</title>
    
  <!-- CSS 樣式 -->
  <style>
    /* 設定整個頁面的背景與字體 */
    body {
      background-color:aliceblue;
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      margin: 20px;
      line-height: 1.6;
    }

    /* 標題樣式 */
    h1 {
      color:rgb(12, 177, 243);
      text-align: center;
      text-shadow: 2px 2px #ccc;
    }

    h2 {
      color:#4286b4  ;
      border-bottom: 2px solid #4286b4;
      padding-bottom: 5px;
    }

    /* 段落樣式 */
    p {
      color: #333;
      font-size: 18px;
    }
    
    /* 圖片樣式 */
    img {
      display: block;
      margin: 20px auto;
      border: 5px solid #ddd;
      border-radius: 10px;
    }

    /* 按鈕樣式 */
    button {
      display: block;
      margin: 0 auto;
      padding: 10px 20px;
      background-color: #ff7f50;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      cursor: pointer;
      transition: 0.3s;
    }
    
    button:hover {
      background-color: #ff4500;
    }
  </style>
</head>
<body>
  <!--標題-->
  <h1>🌟我的第三天網頁🌟</h1> 
  <h2>今天學習 CSS 樣式</h2>

  <!--段落-->
  <p>這是我學習 CSS 的第一天。我學會了如何改變背景、文字、按鈕的顏色、大小，讓我的網頁更美觀。</p>
  <p>CSS 就像是網頁的「化妝師」，能讓單調的頁面變得有設計感。</p>

  <!--圖片-->
  <img src="https://picsum.photos/400" alt="隨機圖片">

  <!--按鈕-->
  <button onclick="alert('你點擊了按鈕')">點我一下</button>
</body>
</html>