• 姓名:陳首輔
• 學號:4051C011

上課連結

• 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：使用外部的 CSS 檔案
• 4.1.A：CSS 字型的使用
• 4.6.A：在清單上用hover
• 4.6.B：在清單上用hover -- 只對下一層有效果
• 4.6.C：在清單上用hover -- 增加 display 的功能(隱藏)
• 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：大頭照
• 5.4.C：用 visibility 做心理測驗
• 5.4.D：心理測驗2 - 簡單的變形
• 5.4.E：心理測驗3 - 簡單的變形
• 6.1.A：線性漸層
• 6.1.B：外層有漸變色的大頭照
• 6.2.A：底圖的設置應用
• 6.2.B：底圖的填滿機制 - cover/contain
• 6.2.C：用清單來假裝按鈕功能
• 6.3.A：跳動的小圖片特效
• 6.4.A：轉動的小企鵝
• 6.5.A：慢慢變化的特效 (transition)
• 6.6.A：會自己跑的動畫特效 (animation)
• 6.6.C：蜜蜂會跑來跑去的效果 (animation)
• 6.6.E：蜜蜂會突然放大的效果 (animation + transfrom scale )
• 6.6.F：圖片的淡入淡出特效
• 7.1.A：主導覽列 (用清單來處理)
• 7.1.B：主導覽列, 增加 active 的展示
• 7.2.A：主導覽列, 兩層選單
• 7.2.B：主導覽列, 兩層選單, 增加滑動效果
• 7.5.A：HTML5 的版面配置簡易處理

Home Works

• 習題1.5.2：書籍清單練習