April 11, 2017

Frontend Intermediate Course - 作業一

作業 1 的 GitHub 連結:基本 HTML/CSS 練習:以 Twitch 為例

這個作業還沒有用到 JavaScript,我也剛好上完 動畫互動網頁程式入門(HTML/CSS/JS)的 HTML 跟 CSS 的部分,趁記憶還很新所以 4 月 9 號開始寫,大概3-4個小時完成吧,因為剛開始還犯了一個很笨的錯誤所以拖了一點時間。

九個方塊其實把一個刻出來之後複製九次就可以了,不過如何把九個方塊放到我想放的位置上讓我考慮了很久。

一開始想直接對九個方塊分別定位,但是這絕對不是最好的選擇,在不同螢幕大小上一定會跑掉,雖然作業沒有要求 RWD,我也還沒學完 RWD,不過有預感這絕對是最糟糕又最花時間的方式,所以被淘汰。

後來想到吳哲宇老師有教過 flexbox,可以利用 justify-content: centeralign-self: center 來左右跟上下置中,比起設定 margin-left: automargin-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: coverbackground-attachment: fixed,為什麼背景無法填滿?而且也不知道該用什麼關鍵字去搜尋,後來只好問胡立老師應該用什麼關鍵字去找。他提到 overflow: auto,加上去之後就解決了!不只背景圖片要加,50% 透明度的黑色也要加上才可以。

第一天的作業就大致上完成了,不過還有幾個問題想研究一下怎麼解決。其中一個是當我把視窗縮小的時候,方塊會不正常的擠壓,像這樣:


所以第二天就一直思考怎麼解決。也有嘗試把九個方塊放在同一個 block 去調整,但是好難定位所以覺得太麻煩放棄了 XD。後來又仔細研究一下 flexbox,發現有不同的排列方法,於是嘗試加上 flex-wrap: wrap 之後,就解決這個問題了。縮小視窗時候就會變成這樣:


還有一個小問題想要解決,是關於自我練習裡面的第六題,把多出的字數用「...」表示。我有先給胡立老師看我寫的自我練習答案,他有提到本來沒有要求在這裡設定字數,但是我把字數限制拿掉之後,多出的字數會跑出方塊:


後來在整個方塊加入 overflow: hidden 之後,多出的字數就不會超出了,但是即使有加 text-overflow: ellipsis 也是無法以「...」表示,字數會剛好切在方塊邊緣。


我猜想應該是格式問題,或是內距、外距,但是已經懶得去調整,想要直接設定字數就好了 XD


於是就完成了這次的作業,分享一下我的 CodePen;
See the Pen HW_1 by Peggy (@pychiang) on CodePen.

這只是我的寫作業過程的筆記,絕對不是最正確的。而我目前只是初心者,如果有錯還請指正。


No comments:

Post a Comment