為了方便使用者閱讀,RWD支援是必要的。
發完文會補讀英文。
項目 | 時間 |
---|---|
人生規劃 | 0 hr 24 min |
支援RWD | 3 hr 12 min |
flex青蛙遊戲 | 0 hr 37 min |
鐵人賽發文 | 0 hr 40 min |
作業二:版面是二欄式網頁,比作業一簡化更多,所以跳過。
參考:CSS3 Flexbox RWD 教學 By 彭彭
筆者建議:跳至02:21 調1.5X速
規劃:筆者網頁為三欄,故與影片規劃不同。
媒體 | 電腦 | 平板 | 手機 |
---|---|---|---|
欄位 | 3 | 2 | 1 |
媒體規格 | 欄位設定 |
---|---|
/>=1200 | 3欄,固定 |
1200>,>500 | 2欄,彈性 |
500>= | 1欄,彈性 |
不熟的朋友可以玩看看flex青蛙遊戲第18關起
重玩以後對flex-direction屬性又更加了解
他會影響到justify-content,align-items.
這次破關從一小時進步到半小時。
.main{
display:flex;
flex-wrap:wrap;
}
@media(max-width:1200px){
main>.item{
width:45%;(沒有50%是怕避免太擠)
}
}
輸出結果:筆者網頁
可以手動拖視窗模擬手機或平板畫面
作業六:
1.沒看過課程,跳過不答。
這題用畫圖回答
語法 | 答 |
---|---|
inlie | 可以和人共享同行,卻不能決定位置大小(寬度)。 |
block | 一人一行,要躺要坐要站都由他。 |
inline-block | 有inlie共享同行,兼有block決定寬度大小。 |
語法 | 答 |
---|---|
static | 古板按照瀏覽器預設位置,沒有個人情緒。 |
relative | 會插隊不會跟其他人協調位置 |
fixed | 跟Excel固定欄位設定很像 |
absolute | 繼承父親領地 |
學習時段主要在下午到晚上,為了增加時數,之後規定13點前至少讀一小時。
這次做RWD才知道,排版沒有排好,有些設定還要再處理。
第四週難度提高很多,目前想加強Git和JavaScript基礎,再來進行課程。
這個計畫前端三劍客個只有一週可以學,進度非常的趕。
前面吃老本勉強跟得上,現在開始有點吃力。
感謝撥冗閱讀。