• 姓名:黃郁棻
• 學號:4110C001

第三課

• 學習CSS 自行與底色
• 學習CSS 字體大小/行高
• 學習CSS head內的style
• 學習CSS 底色與底圖設計
• 學習CSS table與class應用
• 學習CSS table與id應用
• 使用外部呼叫檔案

第四課

• 用CSS展示古詩詞
• 用CSS展示古詩詞-使用padding留白
• 用 CSS 展示古詩詞-使用 Google 字型
• 用 CSS 改變 a 超連結樣式
• 用 CSS 改變 a 超連結樣式-a變區塊 (display: block)
• 使用 :hover 改變滑鼠效果
• 用 CSS 修改清單效果-中文數字
• 用 CSS 修改清單效果-圖示結果
• 表格 CSS 效果
• 簡單巢狀清單
• 簡單巢狀清單-隱藏子清單

第五課

• 第一個方塊樣式練習
• 第一個方塊樣式練習-方塊水平
• 第一個方塊樣式練習-框線圓弧+陰影效果
• 第一個方塊樣式練習-使用自製框線
• 方塊位置的變化學習
• 方塊位置的變化學習-方塊垂直對齊
• 方塊位置的變化學習-浮動在父元素上(float)
• 位置(position)的功能-margin的使用
• 位置(position)的功能-z-index的使用(圖層)
• 位置(position)的功能-inline-block對齊)
• 位置(position)的功能-增加 top/right/bottom/left
• 位置(position)的功能-absolute絕對位置的使用(圖層)
• 父子元素的位置編排-overflow的不同效果
• 父子元素的位置編排-圓形大頭貼
• 父子元素的位置編排-分析 display 與 visible 的差異

第六課

• 練習漸層-底色漸層
• 練習漸層-大頭貼外面加漸層顏色
• 背景處理-三個背景功能
• 背景處理-背景的填滿功能 (contain, cover)
• 背景處理-大量重複的背景假按鈕(opacity)
• 圖片的hover放大/縮小功能
• 圖片的hover放大/縮小功能-transition
• 圖片的hover放大/縮小功能-自行動畫效果
• 動畫效果-改底圖-讓蜜蜂飛
• 圖片變化的效果

• 簡單單層導覽列
• 簡單單層導覽列-增加 active 按鈕
• 簡單單層導覽列-增加 active 按鈕-按鈕列不要空白
• 雙層導覽列效果
• 雙層導覽列效果-慢慢下拉
• 圖片使用地圖 usemap 功能
• 完成版面設計一個範例

第八課

作業

• 古詩詞
• 巢狀清單
• 學歷表格