老師這次給我的建議有：
1. row1、row2、row3 有共同的 CSS，所以應該在
div 的 class 裡多加 row，這樣擴充性比較高，才不用增加 row 就要改一次 CSS。HTML 改成如下：<div class="row row1"> .... </div>2. 頻道名稱跟實況主名字那邊做垂直置中對齊。
第一點的確是我疏忽沒加到，要修改也蠻容易的，所以我就馬上改了我上次 CodePen 上面的檔案。
不過第二點我想要在頻道名稱跟實況主名字外面加
div
然後再去定位，不過這樣 CSS 那邊要修改的地方很多，加上看別人寫的作業，才發現我的 HTML 跟別人長得不一樣 XD，所以想說整個大修改好了，之後的作業二就會用修改過的版本。胡立老師的直播：
1. 基本 HTML/CSS 練習：以 Twitch 為例
我的作業部分差不多就是這樣，下面是看直播的一些筆記。
1. 預覽圖片跟實況主圖片放在 HTML 裡。
我注意到老師除了背景圖片放在 CSS 中，其他的圖片都是加在 HTML 裡，後來有問過他是否加在 HTML 裡比較好，他說當時直播只是懶得修改 CSS 所以才直接用
img 加在 HTML 中 XD，不過他有提到用 CSS background 有一個小缺點，會不知道圖片哪時候載好，但是 img 有 onLoad 事件。不過各有好壞，看時機使用。我依稀知道網頁的載入順序，或是屬性的取捨都會影響網頁呈現的好壞，不過這部分要再深入研究，我等級還不夠高。
2. 頻道名稱跟實況主名字外面多加一個
div。這個就是我作業想要修改的部分，當初沒想到多加一個
div 在頻道名稱跟實況主名字外面比較容易定位。而且整個底部 bottom 也可以用 flexbox 定位，這在以後圖片或字體大小有變化時版面比較不會跑掉。3.
border-radius: 50% 其實就已經是圓形。我一直以為是 100% 才是圓形，其實 50% 就是了，而且再多加上去也不會變更圓 XD。
4. 實況主圖片
overflow: hidden 跟 width: 100%。實況主圖片是圓形，老師先刻出圓形後用
overflow: hidden，然後再把圖片寬度設成 width: 100%。我因為把圖片放在 CSS 中，所以直接用 background-size: cover 來設定。5. 空的
div 在最後。雖然用 flexbox 置中很輕鬆快速，但是遇到方塊有缺少的時候，版面就會跑掉，所以在 HTML 裡，放一些空的
div 在最後就可以維持版面，不會跑版，好聰明的方法啊！6. 新的排版方法 grid。
有一個同學是用最新的排版方法 grid 來做這次的作業，比 flexbox 更容易處理行跟列的排版，搜尋到一篇先存起來 A Complete Guide to Grid，之後有時間再仔細研究。
7. 圖像產生的空隙。
看直播時我跟著老師一起寫，卻發現圖片下方有一個空隙。
似乎是
div 與 圖片高度不同造成的。
可是在老師的瀏覽器上卻沒看到，而且方塊並沒有指定高度，不知道空隙是怎麼產生的。於是跑去問老師，後來才知道原來是因為 CSS 的規格
vertical-align 預設從 baseline 開始，下方對齊 baseline 所以產生空隙，將圖片設成 display: block 就可以消除那個空隙。不過當時直播時老師示範沒出現這個問題呢？我原本以為是因為他用的瀏覽器跟我的不同所以才沒這個情況，結果跟我一樣都是使用 Chrome，後來他才發現因為他沒有打
<!DOCTYPE html> 在他的 HTML 檔案裡，所以反而沒出現這個問題，意外的好處 XD。8. 練習 CSS 的遊戲。
有幾個可以練習 CSS 的遊戲，還蠻有趣的。
我有完成 Flexbox Froggy，真的蠻好玩的，而且可以快速了解 flexbox 的各種用法，原本文字說明看不懂的地方，現在就清楚多了～
以上就是我作業一的回顧筆記，有錯還請指正。
No comments:
Post a Comment