• 姓名: 鳥哥
• 學號: A060Cxxx

• 3.1.B: CSS 初探
• 3.2.A: 第二個範例
• 3.2.B: 互補色的使用
• 3.3.A: CSS 針對整體設定的方式
• 3.3.B: CSS 底圖的設定
• 3.4.A: 使用類別 .class 的 CSS 呼叫方式
• 3.4.B: 使用類別 .class 的 CSS 呼叫方式-類別內的標籤影響方式
• 3.6.A: 使用外部的 style.css 檔案
• 4.1.A: CSS 字型的使用
• 4.1.B: CSS 字型的使用+padding 的應用
• 4.2.A: 超連結的 hover 應用
• 4.2.B: 超連結的 hover 應用 + 變成區塊 display: block
• 4.3.A: hover 的各種應用
• 4.4.A: 清單開頭用中文數字
• 4.4.B: 清單開頭用小圖示
• 4.6.A: 清單上面用 hover 特效
• 4.6.B: 清單上面用 hover 特效 -- 只對下一層有效果
• 4.6.C: 清單上面用 hover 特效 + display: none (隱藏)
• 5.1.A: 第一個方塊練習
• 5.1.B: 第一個方塊練習 -- 方塊置中
• 5.1.C: 第一個方塊練習 -- 方塊圓角+陰影
• 5.2.A: 兩個方塊的對齊功能
• 5.2.B: 使用大方塊包著兩個小方塊的對齊功能
• 5.2.C: 兩個小方塊靠上方對齊
• 5.2.D: 透過 float 功能來對齊
• 5.2.E: 以 overflow 解決 float 造成的父元素問題
• 5.3.A: 方塊重疊的方法: margin
• 5.3.B: 以 z-index 搭配 position 解決圖層順序問題
• 5.3.C: 透過 position 討論定位問題-1
• 5.3.D: 透過 position 討論定位問題-2 用 relative(相對) 定位
• 5.3.E: 透過 position 討論定位問題-3 用 absolute(絕對) 定位
• 5.3.F: 透過 position 討論定位問題-4 用 fixed(固定於瀏覽器) 定位
• 5.4.A: 使用 overflow 來處理與決定超出方塊部分的資料顯示方式
• 5.4.B: 使用 overflow 做出圓形大頭照
• 5.4.C: 使用 visibility 做心理測驗
• 5.4.D: 使用 visibility 做心理測驗-2 一個簡單的變形
• 5.4.E: 使用 visibility 做心理測驗-3 一個簡單的變形
• 6.1.A: 線性漸層
• 6.1.B: 彩虹大頭照
• 6.2.A: 三張底圖 - 寧夏
• 6.2.B: 底圖的填滿機制 - cover/contain
• 6.2.C: 用清單來假裝按鈕的功能
• 6.3.A: 跳動的小圖片特效
• 6.4.A: 轉動的小企鵝 (transform)
• 6.5.A: 慢慢變化的特效 (transition)
• 6.6.A: 會自己變化的動畫特效 (animation)
• 6.6.C: 蜜蜂會跑來跑去的效果 (animation)
• 6.6.E: 蜜蜂會突然變大的效果 (animation + transform: scale)
• 6.6.F: 圖片的淡出淡入特效 (animation + z-index)
• 7.1.A: 主導覽列 (用清單來處理)
• 7.1.B: 主導覽列, 增加 active 的展示
• 7.2.A: 主導覽列, 兩層選單
• 7.2.B: 主導覽列, 兩層選單, 增加滑動效果
• 7.5.A: HTML5 的版面配置簡易處理

Home Works

• 習題 1.5.2: 書籍清單