上課連結

• 第三課
• 3.1.B: 學習CSS 字型/底色
• 3.2.A: 學習CSS 字體大小/行高
• 3.3.A: 學習CSS head內的style
• 3.3.B: 學習CSS 的底色與底圖設計
• 3.4.A: 學習CSS table與 classa應用
• 3.5.A: 學習CSS table與 id應用
• 3.6.A: 學習CSS 使用外部呼叫檔案
• 第四課
• 4.1.A:用CSS展現古詩詞
• 4.1.B:用CSS展現古詩詞-使用padding留白
• 4.1.D:用CSS展現古詩詞-使用Google 字型
• 4.2.A:用CSS 改變a超連結樣式
• 4.2.B:用CSS 改變a超連結樣式-a改變區塊 (display:block)
• 4.3.A:改變滑鼠效果
• 4.4.A:用CSS修改清單效果-中文數字
• 4.4.B:用CSS修改清單效果-清單圖示
• 4.5.A:表格CSS效果
• 第五課
• 5.1.A: 第一個方塊樣式練習
• 5.1.B: 第一個方塊樣式練習-方塊水平
• 5.1.C: 第一個方塊樣式練習-框線圓弧+陰影
• 5.1.D: 第一個方塊樣式練習-使用自製框線
• 5.2.A: 方塊位置的變化學習
• 5.2.B: 方塊位置的變化學習-圖片填滿效果+不太跑版+針對桌機
• 5.2.C: 方塊位置的變化學習-方塊垂直對齊
• 5.2.D: 方塊位置的變化學習-浮動再副元素上
• 5.3.A: 位置(position)的功能-margin的使用
• 5.3.B: 位置(position)的功能-z-index的使用(圖層)
• 5.3.C: 位置(position)的功能-inline-block對齊
• 5.3.D: 位置(position)的功能-增加 top/right/bottom/left
• 5.3.E: 位置(Ffposition)的功能-absolute絕對位置的使用
• 5.3.F: 位置(Ffposition)的功能-absolute絕對位置的使用
• 5.4.A: 父子元素的位置編排-overflow的不同效果
• 5.4.B: 父子元素的位置編排-圓形的大頭貼
• 5.4.C: 父子元素的位置編排-分析 display與visibility的差異
• 第六課
• 6.1.A:練習漸層-使用底色漸層
• 6.1.B:練習漸層-大頭貼外加漸層顏色
• 6.2.A:背景處理-三個背景功能
• 6.2.B:背景處理-背景的填滿功能(contain,cover)
• 6.2.C:背景處理-大量重複的背景假按鈕(opacity)
• 6.3.A:圖片的hover 放大/縮小功能
• 6.5.A:圖片的hover 放大/縮小功能transition 搭配
• 6.6.A:圖片的hover 放大/縮小功能-自行動畫功能
• 6.6.C:動畫效果-改底圖-讓蜜蜂飛
• 6.4.B:動畫效果-改底圖-讓蜜蜂飛
• 第七課
• 7.1.A:簡單單層導覽圖
• 7.1.A:動畫效果-改底圖-讓蜜蜂飛
• 7.2.A:動畫效果-改底圖-讓蜜蜂飛
• 7.2.B:動畫效果-改底圖-讓蜜蜂飛
• 7.3.A:動畫效果-改底圖-讓蜜蜂飛
• 7.5.A:動畫效果-改底圖-讓蜜蜂飛
• 第八課
• 8.1.A:單欄效果
• 8.2.B:雙欄效果

Homeworks