郭慈茜的網頁設計自學網
姓名：郭慈茜
學號：4050C009
學號：4050C009
- 第八堂課
- 第七堂課
- 第六堂課
- 例題 6.1.A 使用漸層背景
- 例題 6.1.B 圓形外框大頭照加上厚重彩虹圓形
- 例題 6.2.A 多張底圖的處理方式
- 例題 6.2.B 背景放大到邊框的型態 cover/contain
- 例題 6.2.C 影像透明度的使用 opacity 的處理
- 例題 6.3.A 方塊內圖片上面疊上文字說明的統一格式處理
- 例題 6.4.A 多重圖示的轉動技巧加上萬用字源的呼叫使用
- 例題 6.4.B 圖示的重疊畫面展示(5個圖示重疊)
- 例題 6.5.A 以漸變方式取代直接變化的 transition 功能
- 例題 6.6.A 以動畫方式讓滑鼠特效變成一直變動的畫面
- 例題 6.6.B 以動畫方式讓企鵝一直轉圈圈<
- 例題 6.6.C 讓底圖的蜜蜂飛
- 例題 6.6.D 讓動畫持續輪轉
- 第五堂課
- 例題 5.1.A 方塊模型的初級理解
- 例題 5.1.B 方塊模型的置中處理(水平對齊, margin)
- 例題 5.1.C 方塊模型的圓角與陰影
- 例題 5.1.D 方塊模型使用圖檔作為框線的來源
- 例題 5.2.A 方塊對齊的機制-inline-block
- 例題 5.2.B 方塊對齊的機制-外部方塊整合排版
- 例題 5.2.C 方塊對齊的機制-內部靠上對齊用
- 例題 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 的效果
- 第四堂課
- 例題 4.1.A
- 例題 4.1.B 內部留白 (padding)
- 例題 4.1.D 加入襯線字體
- 例題 4.2.A 超連結的特效
- 例題 4.2.B a 變成區塊元素
- 例題 4.3.A :hover 的應用
- 例題 4.4.A 清單與hover的同時應用
- 例題 4.4.B 清單特效,使用圖檔來取代前導符號
- 例題 4.5.A 空氣品質的相關說明用CSS美化圖表
- 例題 4.5.B 空氣品質的相關說明用CSS美化圖表:collapse的框線重疊
- 例題 4.6.A 用清單來說明繼承，這是後代通通繼承的時候
- 例題 4.6.B 用清單來說明繼承，僅影響下一代而不是所有後代
- 例題 4.6.C 用清單來說明繼承，加上 display: none 的隱藏應用
- 第三堂課