為了方便使用者閱讀，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基礎，再來進行課程。
這個計畫前端三劍客個只有一週可以學，進度非常的趕。
前面吃老本勉強跟得上，現在開始有點吃力。
感謝撥冗閱讀。
iThome鐵人賽
看影片追技術