這個作業還沒有用到 JavaScript，我也剛好上完 動畫互動網頁程式入門（HTML/CSS/JS）的 HTML 跟 CSS 的部分，趁記憶還很新所以 4 月 9 號開始寫，大概3-4個小時完成吧，因為剛開始還犯了一個很笨的錯誤所以拖了一點時間。
九個方塊其實把一個刻出來之後複製九次就可以了，不過如何把九個方塊放到我想放的位置上讓我考慮了很久。
一開始想直接對九個方塊分別定位，但是這絕對不是最好的選擇，在不同螢幕大小上一定會跑掉，雖然作業沒有要求 RWD，我也還沒學完 RWD，不過有預感這絕對是最糟糕又最花時間的方式，所以被淘汰。
後來想到吳哲宇老師有教過 flexbox，可以利用
justify-content: center 跟 align-self: center 來左右跟上下置中，比起設定 margin-left: auto、margin-right: auto 來調整寬度還要準確方便（詳細 felxbox 的用法可參考：A Complete Guide to Flexbox），但又考慮到 flexbox 上下間距的調整比較不方便，或許因為我也還不熟悉的關係 flexbox 所以不太會應用。後來想到的方法是把九個方塊分成三列，然後三列各用一個 block 包住三個方塊，所以可以利用 flexbox 的置中方便性，也可以方便調整上下距離。置中的問題解決了，可是馬上遇到另一個問題：方塊之間沒有空隙。因為 flexbox 會自動把方塊間的空隙取消，這也是使用 flexbox 的好處之一，但反而讓我沒辦法刻出作業要求的樣子。
後來想說那在方塊外面放框線，至少可以區分方塊，正當我加粗框線的時候發現，把框線顏色設成透明就可以呈現方塊之間有空隙的效果了！
方塊的定位與間隔處理好之後，要來處理背景了。由於作業要求背景還要加上 50% 透明度的黑色，所以 google 了「background image opacity css」這幾個關鍵字，在 w3schools 找到 CSS Opacity / Transparency，裡面有一個說明是 Text in Transparent Box，我就利用那個範例依樣畫葫蘆解決背景加上 50% 透明度的黑色的問題。
不過背景的呈現一直無法填滿整個畫面，因為九個方塊的高度高於背景，下方跑出空白：
我想說明明加了
background-size: cover 跟 background-attachment: fixed，為什麼背景無法填滿？而且也不知道該用什麼關鍵字去搜尋，後來只好問胡立老師應該用什麼關鍵字去找。他提到 overflow: auto，加上去之後就解決了！不只背景圖片要加，50% 透明度的黑色也要加上才可以。第一天的作業就大致上完成了，不過還有幾個問題想研究一下怎麼解決。其中一個是當我把視窗縮小的時候，方塊會不正常的擠壓，像這樣：
所以第二天就一直思考怎麼解決。也有嘗試把九個方塊放在同一個 block 去調整，但是好難定位所以覺得太麻煩放棄了 XD。後來又仔細研究一下 flexbox，發現有不同的排列方法，於是嘗試加上
flex-wrap: wrap 之後，就解決這個問題了。縮小視窗時候就會變成這樣：
還有一個小問題想要解決，是關於自我練習裡面的第六題，把多出的字數用「...」表示。我有先給胡立老師看我寫的自我練習答案，他有提到本來沒有要求在這裡設定字數，但是我把字數限制拿掉之後，多出的字數會跑出方塊：
後來在整個方塊加入
overflow: hidden 之後，多出的字數就不會超出了，但是即使有加 text-overflow: ellipsis 也是無法以「...」表示，字數會剛好切在方塊邊緣。
我猜想應該是格式問題，或是內距、外距，但是已經懶得去調整，想要直接設定字數就好了 XD
於是就完成了這次的作業，分享一下我的 CodePen；
這只是我的寫作業過程的筆記，絕對不是最正確的。而我目前只是初心者，如果有錯還請指正。
No comments:
Post a Comment