---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/13(二) 每日任務

## 題目

做出響應式排版：任務中已提供 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. 小羊
Codepen：https://codepen.io/eqsmebaz-the-selector/pen/ZEKBMVr -->

<!-- 4. 玉凌
Codepen：https://codepen.io/ruby376758123/pen/WNjogmp -->

<!-- 5.陳瑋崗
Codepen：https://codepen.io/weigang-chen/pen/jOmVePa -->

<!-- 6.小胖
codepen:https://codepen.io/a1073315/pen/ExmNdYO -->

<!-- 7.黃彩雲
Codepen: https://codepen.io/corin19/pen/eYWBPpj -->

<!-- 8.羿宣
Codepen: https://codepen.io/Ann828/pen/GRmNYmN?editors=1100 -->

<!-- 9.彥碩
CodePen: https://codepen.io/nelsonsu/pen/YzVpJjG?editors=0100 -->

<!-- 10.薰
Codepen: https://codepen.io/chiaoshin/pen/VwbmEKY -->

<!-- 11.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/RwVoeyo -->

<!-- 12. 莊承叡
Codepen： https://codepen.io/Ray_ty39/pen/GRmNYLv
-->

<!-- 13. 廖仕雅
codepen: https://codepen.io/sophia0121/pen/dyWOgap?editors=1100-->

<!-- 14. 黃郁芳
codepen: https://codepen.io/YuFang0323/pen/RwVoqGj -->

<!-- 15. JT
codepen: https://codepen.io/jsht-the-animator/pen/RwVoqJJ -->

<!-- 16.小松
codepen: https://codepen.io/120061203/pen/vYmyvGv?editors=1100
-->

<!-- 17.Genie
codepen: https://codepen.io/hcliii/pen/QWvGzdN -->

<!-- 18. Steve
codepen: https://codepen.io/steve5631/pen/RwVoEvb
-->

<!-- 19. 人中
codepen: https://codepen.io/renchong2424/pen/ZEKBwoV
-->

<!-- 20. Jack
Codepen: https://codepen.io/JackChen89/pen/WNjomrY -->

<!-- 21. Iris
Codepen: https://codepen.io/hungyen/pen/mdmOoRX -->

<!-- 22. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/vYmyPep -->

<!-- 23. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/abWBrbP
-->

<!-- 24. 姚賢芸
Codepen: https://codepen.io/crazzyamy/pen/GRmNwJy -->

<!-- 25. 陳方云
Codepen:https://codepen.io/ssnnny/pen/xxdReXj -->

<!-- 26. 劉子瑜
Codepen:https://codepen.io/superfish195/pen/mdmOZgz
-->

<!-- 27.Cloudia
Codepen:https://codepen.io/hkps87/pen/OJmbqXE -->

<!-- 28.馮旻
Codepen:https://codepen.io/tboqkvhk/pen/XWRNvXg?editors=1100 -->

<!-- 29. 辰
Codepen:https://codepen.io/dnangelapril/pen/vYmgBEY
-->

<!-- 31. 德德(邱仲德)
Codepen:https://codepen.io/Chiouder/pen/qBmREPy
-->

<!--32.廖奕慈
Codepen:https://codepen.io/yiciLiao/pen/dyWNoKY?editors=1100 -->

<!--34. 劉永琦
Codepen:https://codepen.io/wjsvypvv-the-decoder/pen/OJmWNgW -->

<!--35. 張筱萱
Codepen:https://codepen.io/big-banana/pen/rNmjGEg
-->

<!--36. 陳書妤
Codepen：https://codepen.io/shuyu227/pen/PoNYEKV -->

<!--36. 霈楹
Codepen：https://codepen.io/nrweahgl-the-selector/pen/zYwNJNz?editors=1100 -->