鳥哥的網頁設計自學網
姓名：鳥哥
學號：4050C024
學號：4050C024
- 第一堂課
- 第二堂課
- 第三堂課
- 第四堂課
- 第五堂課
- 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:經常用在首頁旋轉圖示的小動畫效果
- 第七堂課
- 第八堂課