慷董設計
姓名：慷董
學號：4066C001
學號：4066C001
- 第三堂
- 第四堂
- 第五堂
- 例題 5-1-1 方塊模型的初級理解
- 例題 5-1-2 方塊模型的置中處理(水平對齊, margin)
- 例題 5-1-3 方塊模型的圓角與陰影
- 例題 5-1-4 方塊模型使用圖檔作為框線的來源
- 例題 5-2-1 方塊對齊的機制-inline-block
- 例題 5-2-2 方塊對齊的機制-外部方塊整合排版
- 例題 5-2-3 方塊對齊的機制-內部靠上對齊用 vertical-align
- 例題 5-2-4 方塊對齊的機制-內部靠上對齊用 float
- 例題 5-2-5 方塊對齊的機制-外部框線補齊用 overflow
- 例題 5-3-1 位置探討 - 正常流向時，使用 margin 調整移動的位置
- 例題 5-3-2 位置探討 - 承上，使用 z-index 搭配 position 來調整圖層
- 例題 5-3-3 位置探討 - 一般排版，使用垂直朝上對齊的效果，分三欄位
- 例題 5-3-4 位置探討 - 使用 position relative 來調整單一方塊移動的效果
- 例題 5-3-5 位置探討 - 使用 position absolute 來調整全部方塊移動的效果
- 例題 5-3-6 位置探討 - 使用 position fixed 來增加一個類似按鈕方塊的功能
- 例題 5-4-1 討論不同的 overflow 效果展示
- 例題 5-4-2 圓形的大頭貼產生的方式
- 第六堂
- 例題 6.1.A 色彩漸層的初體驗
- 例題 6.1.B 圓形的彩虹漸層處理
- 例題 6.2.A 寧夏的歌詞 (三張底圖的處理方式)
- 例題 6.2.B 底圖的填滿效果 (contain vs. cover)
- 例題 6.2.C 使用底圖產生假按鈕的效果
- 例題 6.3.1 特定效果的圖示變化
- 例題 6.4.1 使用 transform - rotate 來改變圖層的變化
- 例題 6.4.2 使用 transform - translate+scale來改變圖層的變化
- 例題 6.5.1 特定效果的圖示變化-加上漸變(transition)
- 例題 6.6.1 讓圖示自己動的小動畫-1(@keyframes)
- 例題 6.6.2 讓企鵝自己轉圈圈
- 例題 6.6.3 在背景下的蜜蜂會飛來飛去的
- 例題 6.6.4 經常用在首頁旋轉圖示的小動畫效果
- 第七堂
- 第八堂課