甘宜平
姓名：甘宜平
學號：A060C104
學號：A060C104
- 第 3 課: CSS 初探
- 第 3 課: 第二個範例
- 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 的版面配置簡易處理