• 姓名:陳慧琳
• 學號:4060C034
• 回首頁

• 例題3.1.B:第一次使用 CSS 取代
• 例題3.2.A:探討CSS單位
• 例題3.2.B:探討CSS的簡易使用
• 例題3.3.A:CSS在head使用的整體設定值
• 例題3.3.B:CSS處理背景
• 例題3.4.A:CSS處理兩種不同的class
• 例題3.4.B:CSS處理table的底圖
• 例題3.5.A:CSS使用id去呼叫，不是用class
• 例題3.6.A:使用外部呼叫的 style.css 樣式

第四堂課的內容

• 例題4.1.A:簡易的CSS字型處理
• 例題4.1.B:簡易的CSS字型處理+padding(內部留白)
• 例題4.1.D:使用本伺服器提供的中文字型
• 例題4.2.A:超連結的使用
• 例題4.2.B:超連結變成區塊
• 例題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:方塊初探
• 例題5.1.B:方塊-水平置中
• 例題5.1.C:方塊-框線的圓角+陰影
• 例題5.1.D:方塊-自製邊框圖片(90*90為例)
• 例題5.2.A:方塊-將方塊變成行內元素
• 例題5.2.B:方塊-盡量不要跑版設計之一
• 例題5.2.C:方塊-用vertical-align 進行向上對齊功能(放在子元素內)
• 例題5.2.D:方塊-用float進行向上對齊功能
• 例題5.2.E:方塊-加上overflow的元素功能
• 例題5.3.A:方塊-兩個方塊的重疊與透明度
• 例題5.3.A:方塊-透過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:影藏的效果

第六堂課的內容

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

Home Works

第三堂課

• 外部CSS風格設定檔主要內容
• 以CSS風格取代HTML的課表展示
• 以CSS風格取代HTML的特殊符號對應表
• 以CSS風格取代HTML的書籍清單展示

第四堂課

• 以CSS修飾古文的展示
• 以CSS修飾清單及巢狀清單的隱藏使用
• 以CSS修飾表格以及:hover的美化

第六堂課

• 以CSS修飾表格以及:hover的美化