• 姓名:陳羽廷
• 學號:4050C020
• 回我的個人首頁

第三課

• 例題 3.1.B 第一個 CSS 文字、背景的調整
• 例題 3.2.A 考慮單位大小，例如文字大小
• 例題 3.2.B 許多底色的設定方式
• 例題 3.3.A 使用 head 內的 style 修改預設標記顯示模式
• 例題 3.3.B 加上底圖的設定方式
• 例題 3.4.A 表格加上兩種不同的 tr 顯示模式
• 例題 3.4.B 設定類別影響子標記的方式 (table.class1 tr {..})
• 例題 3.5.A 使用 id 取代 class 的方案
• 例題 3.6.A 使用外部檔案來處理 css 的呼叫

第四課

• 4.1.A 中文作業系統常見的支援字型
• 4.1.B 字距、行距與留白
• 4.1.D 由自己的網站提供免費授權的字型
• 4.2.A 關於行內元件 (inline block) 的超連結設計
• 4.3.A 關於 :hover 的應用
• 4.4.A 關於清單的特殊效果
• 4.4.B 清單的項目符號使用圖示來展示
• 4.5.A 空氣品質表格處理
• 4.5.B 空氣品質表格處理:collapse框線重疊
• 4.6.A 以清單來說明使用ul li會產生的後帶繼承影響問題

第五課

• 例題 5.1.A 方塊模型的初級理解
• 例題 5.1.B 方塊模型的置中處理(水平對齊, margin)
• 例題 5.1.C 方塊模型的圓角與陰影
• 例題 5.1.D 方塊模型使用圖檔作為框線的來源
• 例題 5.2.A 方塊對齊的機制-inline-block
• 例題 5.2.B 方塊對齊的機制-外部方塊整合排版
• 例題 5.2.C 方塊對齊的機制-內部靠上對齊用 vertical-align
• 例題 5.2.D 方塊對齊的機制-內部靠上對齊用 float
• 例題 5.2.E 方塊對齊的機制-外部框線補ˋ齊用 overflow
• 例題 5.3.A 位置探討 - 正常流向時，使用 margin 調整移動的位置
• 例題 5.3.B 位置探討 - 承上，使用 z-index 搭配 position 來調整圖層
• 例題 5.3.C 位置探討 - 一般排版，使用垂直朝上對齊的效果，分三欄位
• 例題 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 搭配 hover 的效果

第六課

• 例題 6.1.A 色彩漸層的初體驗
• 例題 6.1.B 圓形的彩虹漸層處理
• 例題 6.2.A 寧夏的歌詞 (三張底圖的處理方式)
• 例題 6.2.B 底圖的填滿效果 (contain vs. cover)
• 例題 6.2.C 使用底圖產生假按鈕的效果
• 例題 6.3.A 特定效果的圖示變化
• 例題 6.4.A 使用 transform - rotate 來改變圖層的變化
• 例題 6.4.B 使用 transform - translate+scale來改變圖層的變化
• 例題 6.5.A 特定效果的圖示變化-加上漸變(transition)
• 例題 6.6.A 讓圖示自己動的小動畫-1(@keyframes)
• 例題 6.6.B 讓企鵝自己轉圈圈
• 例題 6.6.C 在背景下的蜜蜂會飛來飛去的
• 例題 6.6.D 經常用在首頁旋轉圖示的小動畫效果

第七課

• 例題 7.1.A 第一個導覽列功能
• 例題 7.1.B 第一個導覽列功能-外加活動中的項目
• 例題 7.1.C 第一個導覽列功能-按鈕連在一起
• 例題 7.2.A 第一個下拉式選單
• 例題 7.2.B 做選單的 transition 漸變特效
• 例題 7.3.A 使用圖片地圖的超連結導覽方式
• 例題 7.4.B 使用 Balsamiq 超快速製作頁面簡介
• 例題 7.5.A 一層一層建置好所需要的版型(搭配 7.4.B)

Home Works

• 第三課
• 外部的CSS風格設定檔主要內容
• 以CSS風格取代HTML的課表展示
• 以CSS風格取代HTML的特殊符號對應表
• 以CSS風格取代HTML的書籍清單展示
• 第四課
• 以CSS修飾古文的展示
• 以CSS修飾清單以及朝狀清單的隱藏使用
• 以CSS修飾表格以及:hover的美化
• 第五課
• 使用Position排版
• 使用 :hover搭配visbilitty進行答案隱藏
• 第六課
• FB彩虹人形圖示
• 台鐵火車時刻查詢系統
• 圖片特效：中央放大
• 圖片特效：中央漸變放大
• 蜜蜂找你
• 照片幻燈片淡入淡出效果
• 第七課
• 使用較清爽的導覽列模式
• 讓原本橫的導覽列變成直的導覽列模式
• 預計達成的期中報告網站列表
• 透過地圖連結以及清單項目的絕對位置說明