黑黑的網頁設計自學網
姓名：陳守鴻
學號：4060C024
學號：4060C024
- 第三堂課
- 例題 3.1.B: 第一次使用 CSS 取代 <font>
- 例題 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: CSS 使用外部呼叫的 style.css 樣式
- 第四堂課
- 例題 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: 方塊初探
- 例題 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.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:版面配置-兩欄式設計