• 姓名：徐群恒
• 學號：4071C003
• 回去我的首頁

第三堂課的內容

• 例題3.1.B：第一次使用CSS取代<font>
• 例題3.3.A：CSS在head使用的整體設定值
• 例題3.3.B：CSS處理背景
• 例題3.4.A：處理兩種不同的class
• 例題3.4.B：處理table的底圖
• 例題3.5.A：CSS用id去呼叫，不是用class
• 例題3.6.A：使用外部呼叫的style.class樣式

第四堂課

• 例題4.1.A：簡易的CSS字型處理
• 例題4.1.B：簡易的CSS字型處理+padding(內部留白)
• 例題4.1.D：使用本伺服器提供的中文字型
• 例題4.2.A：超連結設計
• 例題4.2.B：超連結設計(讓a變成區塊元素)
• 例題4.3.A：任何地方都能使用:hover
• 例題4.4.A：清單的特殊效果(中文號碼清單)
• 例題4.4.B：清單的特殊效果(項目變圖片)
• 例題4.5.A：表格功能的CSS修訂
• 例題4.5.B：表格功能-border-collapse 功能
• 例題4.6.A：繼承 - 清單為例
• 例題4.6.B：繼承 - 後代字孫不會被影響>
• 例題4.6.C：繼承 - display的隱藏效果

第五堂課

• 例題5.1.A：CSS方塊
• 例題5.1.B：CSS方塊的水平置中
• 例題5.1.C：CSS方塊框線形狀變化與陰影
• 例題5.1.D：CSS方塊自製邊框圖片(90X90 為例)
• 例題5.2.A：將方塊變成行內元素
• 例題5.2.B：讓方塊盡量不要跑版的設計之一
• 例題5.2.C：方塊-用 vertical-align 排版向上對齊
• 例題5.2.D：方塊-用 float 漂浮排版向上對齊
• 例題5.2.E：方塊-加上 overflow 的父元素功能
• 例題5.3.A：方塊-兩個方塊的重疊與透明度
• 例題5.3.B：方塊-透過 z-index 調整元素的圖層上/下
• 例題5.3.C：方塊-position位置初探
• 例題5.3.D：方塊-position - relative 的位置移動
• 例題5.3.E：方塊-position - absolute 的位置移動
• 例題5.3.F：方塊-position - fixed 固定的位置上
• 例題5.4.A：方塊-overflow 的再探討
• 例題5.4.B：圓形大頭貼
• 例題5.4.C：visibility的隱藏效果

第六堂課

• 例題6.1.A：背景的漸層效果初探
• 例題6.1.B：背景的漸層效果-用於大頭照
• 例題6.2.A：背景--多張背景的應用
• 例題6.2.B：背景--背景填滿的效果-cover,contain
• 例題6.2.C：背景--清單變成按鈕的效果
• 例題6.3.A：照片圖文框設計
• 例題6.4.A：方塊的變形--角度變化與疊圖
• 例題6.4.B：方塊的變形--方塊的大小，位置
• 例題6.5.A：照片圖文框設計-增加漸變功能(類似動畫)
• 例題6.6.A：讓圖片自己動的小小動畫效果

第七堂課

• 例題7.1.A：用清單設計導覽列
• 例題7.1.B：用清單設計導覽列-增加目前瀏覽中的頁面
• 例題7.1.C：用清單設計導覽列-增加目前瀏覽中的頁面-連在一起
• 例題7.2.A：用清單設計導覽列-兩層導覽列
• 例題7.2.B：用清單設計導覽列-兩層導覽列-加上下拉效果
• 例題7.3.A：用圖片進行超連結的 map 功能
• 例題7.4.B：使用Balsamiq來製作網頁草圖
• 例題7.5.A：主要的版面配置建置

第八堂課

• 例題8.2.A：版片配置:單欄式設計
• 例題8.2.B：版片配置:兩欄式設計
• 例題7.3.A：用圖片進行超連結的 map 功能
• 例題7.4.B：使用Balsamiq來製作網頁草圖
• 例題7.5.A：主要的版面配置建置

第三堂課回家作業

• 用CSS換掉舊的HTML格式
• 用CSS樣式處理課表
• 用CSS處理特殊符號表
• 用CSS處理鳥哥叢書

第四堂課回家作業

• 用CSS修飾古文的展示
• 用CSS修飾清單及巢狀是清單的隱藏使用

第六堂課回家作業

• 使用漸層處理與圖片重疊的技巧，處理彩虹人物像
• 直立的按鈕改成橫式按鈕，並增加一個按鈕
• 圖是放大變成在正中央變大，不是向右下方放大的模樣
• 承上，增加漸變效果
• 蜜蜂飛來飛去，衝向螢幕來嚇你
• 照片的幻燈片淡出/淡入效果功能

第七堂課回家作業

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