Zi Lin's HTML網頁設計自學網
姓名：汪紫琳
學號：4050C045
學號：4050C045
- 第三堂課
- 第四堂課
- 4.1.A： 使用 CSS 修改字體相關的功能顯示
- 4.1.B： 在字框與字體之間透過 padding 保留空白留白感
- 4.1.C： 使用外部雲端字型(會有時間期限，已經失效)
- 4.1.D： Google 與 Adobe 提供的字型顯示中文
- 4.2.A： 超連結的 :hover, :active, :focus 特效
- 4.2.B： 讓超連結變成區塊顯示 (display: block)
- 4.3.A： :hover 用在其他任意的地方
- 4.4.A： 清單與 :hover 的同時應用
- 4.4.B： 清單特效:使用圖檔來取代前導符號
- 4.5.A： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表
- 4.5.B： 空氣品質 (AQI) 的相關說明用 CSS 美化圖表 :collapse 的框線重疊
- 4.6.A： 以清單來說明使用 ul li 會產生的後代繼承影響問題
- 4.6.B： 承上，使用 ul>li 討論後代就不會繼承的效應
- 4.6.C： 使用 display 搭配 :hover 討論隱藏資料的特效
- 第五堂課
- 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 : 經常用在首頁旋轉圖示的小動畫效果
- 第七堂課
- 第八堂課