• 姓名:張翔霖
• 學號:4090c010

上課練習

• 3.1.B 第一個 css 練習
• 3.3.A另一種CSS呼叫方式
• 3.3.B CSS底圖練習
• 3.4.A 使用CSS呼叫
• 3.4.B 表格底圖的應用
• 3.5.A 表格底圖的應用-使用#與ID
• 3.6.A 使用外部呼叫的CSS設定檔

第四堂課

• 4.1.A 字型練習
• 4.1.B 了解 padding (內部留白)與 goolge 字型
• 4.2.A 超連結 a 的變化
• 4.2.B 超連結 a 變成區塊元素
• 4.3.A 使用 hover 效果
• 4.4.A 清單的圖示
• 4.4.B 清單效果
• 4.5.A 表格的CSS的效果
• 4.5.B 表格的collapse效果
• 4.6.A CSS的繼承效果
• 4.6.B CSS的繼承效果-使用
• 4.6.C 使用display:none隱藏的效果

第五堂課

• 5.1.A 方塊練習-1
• 5.1.B 方塊練習-2-置中功能 'auto'
• 5.1.C 方塊練習-3-圓角框線跟陰影
• 5.2.A 方塊練習-4-平行處理
• 5.2.B 方塊練習-5-圖片適應方塊的寬度
• 5.2.C 方塊練習-6-垂直對齊 vertical-align
• 5.2.D 方塊練習-7-漂浮(float)
• 5.2.E 方塊練習-8-父元素加上溢出 overflow
• 5.3.A 方塊位置-1-margin 的用法
• 5.3.B 方塊位置-2-使用 z-index
• 5.3.C 方塊位置-3-使用 relative 相對位置
• 5.3.D 方塊位置-4-使用 relative 進行位置移動
• 5.3.E 方塊位置-5-使用 absolute 絕對位置相同原點
• 5.3.F 方塊位置-6-使用 fixed 固定位置-瀏覽器
• 5.4.A 方塊位置的應用-1-固定長寬討論 overflow
• 5.4.B 方塊位置的應用-2-圓形大頭照
• 5.4.C 方塊位置的應用-3-部分資料隱藏的效果

第六堂課

• 6.1.A 色彩漸層
• 6.2.A 三張底圖的應用-向日葵
• 6.2.B 底圖填充方式: contain, cover
• 6.2.C 底圖按鈕功能
• 6.3.A 會變動的圖示
• 6.3.B 會變動的圖示-加上transition
• 6.4.A 重疊圖示-transform-rotate
• 6.4.B 重疊圖示-transforn-scale translate
• 6.6.A 第一個動畫效果

第七堂課

• 7.1.A 導覽列選單-橫向
• 7.1.B 導覽列選單-橫向-增加active類別
• 7.1.C 導覽列選單-橫向-稍微修改一下樣式
• 7.2.A 導覽列選單-下拉式選單
• 7.2.B 導覽列選單-下拉式選單-增加效果
• 7.3.A 導覽列選單-地圖導覽列 usemap
• 7.5.A 一個簡易的版面配置版本

第八堂課

• 8.2.A 單欄式版面設計
• 8.2.b 雙欄式版面設計

第九堂課

第十堂課

回家作業

• 4.7.2：以 CSS 修飾古文的展示
• 4.7.4：以 CSS 修飾清單以及巢狀清單的隱藏使用

• 3.7.2:外部的css風格設定檔主要內容
• 3.7.3:以 CSS 風格取代 HTML 的課表展示
• 3.7.4:以 CSS 風格取代 HTML 的特殊符號對應表