• 姓名:楊貴傑
• 學號:4110C016
• 回個人首頁

上課連結

第八課

• 8.1.A: 單欄設計
• 8.2.B: 雙欄設計

第七課

• 7.1.A:簡單單層導覽列
• 7.1.B:簡單單層導覽列-增加 active 按鈕
• 7.1.C: 簡單單層導覽列-增加 active 按鈕-按鈕列不要空白
• 7.2.A: 雙層導覽列效果
• 7.2.B: 雙層導覽列效果-慢慢下拉
• 7.3.A: 圖片使用地圖 usemap 功能
• 7.5.A: HTML5完整版面設計-一個範例

第六課

• 6.1.A: 練習漸層-使用底色漸層
• 6.1.B: 練習漸層-大頭貼外面加漸層顏色
• 6.2.A: 背景處理-三個背景功能
• 6.2.B: 背景處理-背景的填滿功能 (contain, cover)
• 6.3.A: 圖片的 hover 放大/縮小功能
• 6.4.A: 圖片變化的效果-旋轉
• 6.4.B: 圖片變化的效果-五張圖疊疊樂
• 6.5.A: 圖片的 hover 放大/縮小功能-transition 搭配
• 6.6.A: 圖片的 hover 放大/縮小功能-自行動畫效果
• 6.6.C: 動畫效果-改底圖-讓蜜蜂飛
• 6.6.D: 圖片變化的效果-五張圖疊疊樂-動畫滑動

第五課

• 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: 位置(position)的功能-absolute絕對位置的使用
• 5.3.F: 位置(position)的功能-fixed 固定在瀏覽器上面的位置
• 5.4.A: 父子元素的位置編排-overflow的不同效果
• 5.4.B: 父子元素的位置編排-圓形大頭貼
• 5.4.C: 父子元素的位置編排-分析 display 與 visibility 的差異

第四課

• 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: 使用 :hover 改變滑鼠效果
• 4.4.A: 用 CSS 修改清單效果-中文數字
• 4.4.B: 用 CSS 修改清單效果-圖示結果
• 4.5.A: 表格 CSS 效果
• 4.6.A: 簡單巢狀清單
• 4.6.C: 簡單巢狀清單-隱藏子清單的效果

第三課

• 3.1.B: 學習 CSS 字型/底色
• 3.2.A: 學習 CSS 字體大小/行高
• 3.3.A: 學習 CSS head 內的 style
• 3.3.B: 學習 CSS 的底色與底圖設計
• 3.4.A: 學習 CSS table 與 class 應用
• 3.5.A: 學習 CSS table 與 id 應用
• 3.6.A: 學習 CSS 使用外部呼叫檔案

作業連結

作業區

第七課

• ex7.6.2 使用較清爽的導覽列模式
• ex7.6.2 使用較清爽的導覽列模式
• ex7.6.3 讓原本橫的導覽列變成直的導覽列模式
• ex7.6.4 預計達成的期中報告網站列表
• ex7.6.5 透過地圖連結以及清單項目的絕對位址說明

第六課

• ex6.7.2 使用漸層處理與圖片重疊技巧，處理彩虹人物像
• ex6.7.3 直立式按鈕改橫式按鈕，並增加一個按鈕
• ex6.7.4 圖示放大變成中央放大，非向下右方放大模樣
• ex6.7.5 在6.7.4追加漸變功能
• ex6.7.6 蜜蜂飛來，衝向螢幕嚇你
• ex6.7.7 照片的幻燈片淡出/入效果功能

第五課

• 5.5.2 使用position進行排版
• 5.5.3 使用hover搭配visibility進行答案隱藏

第四課

• ex04.7.2 CSS風格修飾古詩詞展示
• ex04.7.4 CSS風格修飾簡單巢狀清單
• ex04.7.5 CSS風格修飾表格及 hover的美化

第三課

• ex03.7.2: overall.css風格設定
• ex03.7.3: CSS風格取代HTML的課表
• ex03.7.4: CSS風格取代HTML的特殊符號
• ex03.7.5: CSS風格取代HTML的鳥哥叢書介紹