Yulu的網頁設計自學網
姓名：郭育如
學號：4050C044
學號：4050C044
- 第三堂課
- 第四堂課
- 4.1.A： 簡單文字的滾滾長江東逝水
- 4.1.B： 承上，加上內部留白的 padding 處理
- 4.1.C： 使用外部雲端字體(會有時間限制，已經失效)
- 4.1.D： 承上，但是使用自己伺服器提供的字形
- 4.2.A： 超連結的特殊效果(:hover)
- 4.2.B： 超連結元素變成區塊元素(display:block)
- 4.3.A： 任何東西都可以 :hover 的啦
- 4.4.A： 清單的中文數字顯示
- 4.4.B： 清單的項目符號使用圖示來展示
- 4.5.A： 空氣表格處理
- 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-right:auto
- 5.1.C： 方塊加上圓角以及陰影的方式
- 5.1.D： 使用自製框線: border-image:block
- 5.2.A： 利用display: inline-block讓區塊標記在水平線上面對齊
- 5.2.B： 在小方塊外面加上一個大方塊來進行版面控制
- 5.2.C： 利用vertical-align 讓元素對齊水平線上方
- 5.2.D： 利用 float 讓子元素漂浮在父元素上方
- 5.2.E： 父元素加上 overflow 來解決子元素 float 後的排版問題
- 5.3.A： 利用 margin 來讓方塊重疊的方式
- 5.3.B： 透過 z-index 指定圖層的上下順序
- 5.3.C： 透過 vertical-align 以及外層排版，定義三欄排版版型
- 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： 底圖的填滿效果(cotain vs. cover)
- 6.2.C： 使用底圖產生假按鈕效果
- 6.3.A： 特定效果的圖示變化
- 6.4.A： 使用 transform-roate 來改變圖層的變化
- 6.4.B： 使用 transform-translate+scale 來改變圖層的變化
- 6.5.A： 特定效果的圖示變化-加上漸變(transition)
- 6.6.A： 讓圖示自己動的小動畫(@keyframes)
- 6.6.B： 讓企鵝自己轉圈圈
- 6.6.C： 在背景下的蜂蜜會飛來飛去的
- 6.6.D： 經常用在首頁旋轉圖示的小動畫效果