---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/21(三) 每日任務

## 題目

做出響應式排版：任務中已提供 HTML 的部分，請同學將 CSS 內有「...」部分替換成 CSS 語法，練習將以下版型在**桌機尺寸時設為四個一排**，**平板尺寸時設定為兩個一排**，在**手機尺寸時設定為一個一排**，如圖所示：
>桌機尺寸時設為四個一排


>平板尺寸時設定為兩個一排


>手機尺寸時設定為一個一排


請在 Pen Settings 設定 CSS Reset，如圖：


---

### HTML

<div class="container">
    <div class="main">
      <div class="card">
        <img class="card-img"
          src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
      <div class="card">
        <img class="card-img"
          src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
      <div class="card">
        <img class="card-img"
          src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
      <div class="card">
        <img class="card-img"
          src="https://images.unsplash.com/photo-1493770348161-369560ae357d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60">
        <div class="card-body">
          <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional
            content. This content is a little bit longer.</p>
          <small>9 mins</small>
          <button class="card-btn">點我</button>
        </div>
      </div>
    </div>
  </div>

### CSS

img {
    ...
    height: auto;
}

.container {
    ...
    margin: 0 auto;
}

.main {
    display: flex;
    flex-wrap: wrap;
}

.card {
    ...
}

@media (max-width: 768px) {
    .card {
        ...    
    }
    .container {
        max-width: 720px;
    }
}
@media (max-width: 576px) {
    .card {
        ...
    }
    .container {
        max-width: 540px;
    }
}

## 回報流程

1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答：[Codepen 解答](https://codepen.io/AliceChiang/pen/bGEmBEp)-->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/wvJmyKZ
-->

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/ExWdRJx
-->
<!-- 2.孫 sunne
https://codepen.io/Sunne/pen/dyvBGXx -->

<!-- 3.Jasmin
Codepen:https://codepen.io/thejasmin/pen/gOmgeKw?editors=1100
-->

<!-- 4.Alpha
Codepen:https://codepen.io/alphatero/pen/JjNyBRm
-->
<!--5 陳sam
codepen:https://codepen.io/euldpliv/pen/BaRdPLo
-->

<!--6. yijun
codepen:https://codepen.io/sandy3068/pen/gOWxjMO
-->

<!--7. LiShang
codepen:https://codepen.io/li-shang/pen/qBmXyNJ
-->

<!--8. Jean
codepen:https://codepen.io/jean-liu/pen/vYmJaGw
-->

<!--9. lumei
codepen:https://codepen.io/l_umei/pen/BaRdPWj
-->

<!--10. Xing
codepen:https://codepen.io/xing10/pen/PomKBWq
-->

<!--10. Kane0927
codepen:https://codepen.io/kane-lin/pen/KKmvBWm
-->

<!-- 11. Sam li
codepen:https://codepen.io/sam830623/pen/BaRdPZK
-->

<!-- 12. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/NWjgjQb
-->

<!-- 13. Lina Chen
codepen:https://codepen.io/LinaChen/pen/QWvMBOv
-->

<!-- 14. 雷古娜
codepen:https://codepen.io/tinahopo/pen/gOWxjXa -->

<!-- 15.Sz
codepen: https://codepen.io/szyln/pen/abWyjKP
-->

<!-- 16. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/ZEeZqGY?editors=1000
-->

<!-- 17. kevinhes
codepen:https://codepen.io/dwpwdpad/pen/VwbzGLe
-->

<!-- 18. Tori
codepen: https://codepen.io/hayen/pen/yLboxJR?editors=1100
-->

<!-- 19. Hi Annie
codepen:
https://codepen.io/lhohdalu/pen/MWmvqyz
-->

<!-- 20. Gill
codepen:
https://codepen.io/Gill-Chin/pen/YzVxOVp
-->

<!-- 21.肉鬆
codepen: https://codepen.io/klrkicog/pen/RwVZYgp
-->

<!-- 22. Gui
codepen:https://codepen.io/guitimliu/pen/ZEKJMyP
-->

<!-- 23. Jun Chan
codepen:https://codepen.io/chujunchan/pen/PomKdNj
-->

<!-- 24. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/oNWePdz?editors=1100
-->

<!-- 25. KAREN HUANG
https://codepen.io/Coding_Snorlax/pen/wvdqEvq?editors=1100
-->

<!-- 26. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/KKmvxyr
-->

<!-- 27. curry
https://codepen.io/Ted19851223/pen/OJmjoov
-->

<!-- 28. 群嘉
https://codepen.io/efzdamnp-the-lessful/pen/zYwdJWY?editors=1100
-->

<!-- 29. peter.chen
https://codepen.io/JIAN-RONG/pen/XWRaPoJ?editors=1100
-->

<!-- 30. Joanna Chang
https://codepen.io/polilu1985/pen/VwbzGNW
-->

<!-- 31. natsu
Codepen:https://codepen.io/natsu19/pen/KKmvxjL
-->

<!-- 32. Yao Lin
Codepen:https://codepen.io/yaoyaoiii/pen/VwbzGJz
-->

<!-- 33. huanan
Codepen:https://codepen.io/hua_nan/pen/yLboRYL
-->

<!-- 34. hellocrab
https://codepen.io/hellocrab/pen/bGWrxzm
-->

<!-- 35. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/OJmjWgN?editors=1100
-->

<!-- 36. Cate Chang
codepen: https://codepen.io/tutz/pen/BaRdqYe
-->

<!-- 37. Elaine Liu
codepen: https://codepen.io/elaine7598/pen/qBmXJxp
-->

<!-- 38. Irene Wang
codepen: https://codepen.io/irene-wang-the-looper/pen/WNjEagb
-->

<!-- 39. PHIL
codepen: https://codepen.io/ctkeftjp-the-animator/pen/MWmvPxJ
-->

<!-- 40. 沈依蓉
codepen: https://codepen.io/lily-oa/pen/NWjvEqx
-->

<!-- 41. 葉小嵐
codepen: https://codepen.io/una607/pen/zYwdMBW
-->

<!-- 42. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/abWyQOG
-->
<!-- 43.阿瓜
https://codepen.io/hoick/pen/wvdqQOd?editors=1100 -->
<!-- 44.黃士桓
https://codepen.io/shr-huan-huang/pen/qBmXLRd
-->
<!-- 45.KK
https://codepen.io/potatokaka/pen/WNjELpJ?editors=1100
-->
<!-- 46.anna
https://codepen.io/annhys/pen/ExmvGBK
-->
<!-- 47.Fleur
https://codepen.io/swwlee/pen/OJmjqLL
-->

<!-- 48.Phoebe
https://codepen.io/phoebeho/pen/WNjEmoG
-->

<!-- 49. Riley
codepen: https://codepen.io/jjpxbprd/pen/abWyMya
-->

<!-- 50. ZOE WU
https://codepen.io/Zoechiueh/pen/rNmzPgw?editors=1100
-->

<!-- 51. Ryan
https://codepen.io/RyanYD/pen/RwVZONR
-->

<!-- 52. Archie
https://codepen.io/WuChengHua/pen/RwVZOXx
-->

<!-- 53. Jamie
https://codepen.io/JamieChenWs/pen/oNWerNP
-->

<!--54. 阿和
https://codepen.io/shnny/pen/eYWEweV?editors=0110
-->

<!--55. Katie Zhao
https://codepen.io/katiezhao/pen/poPrXBa
-->

<!-- 56. 大衛
https://codepen.io/exnsrpjc/pen/rNmzbXV?editors=1000
-->

<!-- 57. 吐司
https://codepen.io/danielle-zhang/pen/QWvMeLa
-->

<!-- 58. shanglin
https://codepen.io/rmovuagr-the-selector/pen/jOmGOBy?editors=1100
-->

<!-- 59: Sec
codepen: https://codepen.io/Sentiments/pen/ZEKXbgj?editors=1100
-->

<!-- 60. Jeff H https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A-->

<!-- 61: axlrock1021
codepen: https://codepen.io/lnjbmmxo/pen/yLbzVKY
-->

<!-- 62.Vic
codepen:https://codepen.io/hsuan333/pen/WNjZpGd
-->

<!-- 63.黃小瑄
codepen:https://codepen.io/5quvgp2z/pen/yLbzMKG
-->

<!-- 64. SihLe Huang
codepen:https://codepen.io/bugbug777/pen/poPWdbN?editors=1100
-->

<!-- 65. Una(點子數位)
codepen:https://codepen.io/xbsapbas-the-vuer/pen/rNmGJVa
-->

<!-- 65. Meng
codepen:https://codepen.io/MGHN/pen/KKmNjoO
-->

<!-- 66. Eric-小偉哥
codepen: https://codepen.io/ericLoveDesign/pen/abWyjQX
-->

<!-- 67. oober
codepen: https://codepen.io/xtsjrjdv/pen/vYmeRbB
-->

<!-- 68. ALberto
https://codepen.io/AlbertoLL/pen/oNWGqRr
-->

<!-- 69. ZY Hsu
https://codepen.io/zihyin/pen/poPWOPK -->

<!-- 70.Sylvia-H
codepen: https://codepen.io/Cosmosheart/pen/vYmezMm?editors=1100 -->

<!-- 71.ellie
https://codepen.io/hsu-yu/pen/rNmGRRv
-->

<!-- 72. Freya
codepen:
https://codepen.io/iyowai/pen/WNjZweL?editors=1100
-->

<!-- 72. YuriT
codepen:
https://codepen.io/wenfisht/pen/poPWMBq?editors=1100
-->

<!-- 73. LTL
codepen:
https://codepen.io/ltlin93/pen/ExmbaJY
-->

<!-- 74. Winnie
codepen:
https://codepen.io/winnie0208/pen/VwbrvLB
-->
<!-- 74. yellamoon
codepen:
https://codepen.io/pwbzvqja/pen/rNmYxqb
-->

<!-- 77. Tansy
codepen :
https://codepen.io/subarashii-huch09/pen/zYwPBxw
-->

<!-- 78. Erin Huang
codepen :
https://codepen.io/ErinHuang/pen/JjNObgr
-->
<!-- 79. Shani
codepen:
https://codepen.io/ShaniMa/pen/MWmOPXg -->

<!-- 80. Calon
codepen: https://codepen.io/Calon0118/pen/PomOxNV
-->

<!-- 81.sarah
codepen:https://codepen.io/sarah-wang/pen/LYyePRN
-->

<!-- 82.粘勝凱
codepen:https://codepen.io/szykttdy/pen/JjNMPab?editors=1100
-->

<!-- 83. jimmyFang
codepen:https://codepen.io/pohxiqqo/pen/XWRVJqy?editors=1100
-->

<!-- 84. Yurie
codepen:https://codepen.io/_u_jung/pen/PomEOGx
-->

<!-- 85. Min Chun Tsai
codepen: https://codepen.io/Tsai0926/pen/WNjdYNm
-->

<!-- 86. WilsonHan
codepen:https://codepen.io/wi0821/pen/xxdYGJw
-->

<!-- 86. Mikan
codepen:https://codepen.io/elaine706/pen/RwVQPYg
-->

<!-- 87. Benson
codepen:https://codepen.io/polarBear712/pen/vYmRNaR
-->
<!--88 . icy
codpen:https://codepen.io/ccsbjzze-the-sasster/pen/bGWvMEX -->

<!--89 . Jim Hwang
codpen:https://codepen.io/jimh1129/pen/YzVaMZO -->

<!-- 90. irene
Codepen：https://codepen.io/lohas1107/pen/ZEKoLBZ?editors=1100
-->
<!-- 91. 袁祥恩
Codepen：
https://codepen.io/ovfxsavp-the-bashful/pen/gOWKdOv?editors=1100
-->

<!-- 92. 三隻小貓
codepen:https://codepen.io/bagelover/pen/qBmyWvg -->

<!-- 93. AKI
codepen:https://codepen.io/akichen27/pen/NWjBdYw
-->

<!-- 94. Jessie Cheng
codepen: https://codepen.io/JessieMosbi/pen/qBmyKRx
-->

<!-- 95. WA
https://codepen.io/ldddl/pen/RwVYape
-->

<!-- 96.Page
https://codepen.io/kanawin821/pen/WNjYewY?editors=1100
-->

<!-- 97.ted31539
https://codepen.io/Ted31539/pen/yLbQKNe
-->

<!-- 98.聿凌
https://codepen.io/igzdflpu/pen/zYwyYaP?editors=1100
-->

<!-- 99.陳品宏
https://codepen.io/wtka/pen/ExmGQOP
-->

<!-- 100. YOYO
https://codepen.io/lumedkle/pen/KKmYyWr
-->

<!-- 101.黃羽均
https://codepen.io/azzfgtpo/pen/JjNVepG
-->

<!-- 102.Joe Kuo
https://codepen.io/alertislow/pen/gOWJjRm?editors=0110
-->

<!-- 103.twoz
https://codepen.io/twoz/pen/VwbJgKd?editors=1100
-->

<!-- 104.Keep
https://codepen.io/keep-/pen/qBjVXNa
-->

<!-- 105. Summer.H
https://codepen.io/wan-chine/full/MWobVEv
-->