坤煌的 HTML/CSS 自學網
姓名：林坤煌
學號：4050C011
學號：4050C011
- 第三堂課
- 第四堂課
- 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-right: auto
- 5.1.C：方塊加上圓角以及陰影的方式
- 5.1.D：使用自製寬線: border-image-source 的使用
- 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：底圖的填滿效果 (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：動畫持續輪轉
- 第七堂課
- 第八堂