# 5/24(一) 每日任務

## code連結
作業連結:https://codepen.io/as28652865g/pen/PopmzYv

### 第一題
請寫出一個在所有設備上都是 **左邊佔四 右邊佔八** 的區塊。

知識點：
1. 構建網格時 最外層需有一個 container
2. container 裡面是一個 row (表示一行)
3. 左邊跟右邊的先後順序？先寫的在左邊 依序往右排列。

答案：

<div class="container">
    <div class="row">
        <div class="col-4">col-4</div>
        <div class="col-8">col-8</div>
    </div>
</div>

### 第二題
請做出一個在 PC 版中佔據兩欄 平板中佔三欄 手機版中佔四欄 的區塊。

知識點：
1. col :自應式
2. col-sm :手機
3. col-md :平板
4. col-lg :電腦

答案：

<div class="container">
  <div class="row">
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
    <div class="col-4 col-sm-4 col-md-3 col-lg-2">col</div>
  </div>
</div>

### 第三題
請利用第一題的答案 在右邊佔八的區塊中添加一個左邊佔據十欄右邊佔據兩欄的**巢狀網格**。

知識點：
1. 在 col 中添加巢狀網格 一定要在 col 中加上 row 再在 row 下添加 col

答案：

<div class="container">
    <div class="row">
      <div class="col col-4">col-4</div>
       <div class="col col-8">
        <div class="row">
          <div class="col col-12">col-8</div>
          <div class="col col-10">col-10</div>
          <div class="col col-2">col-2</div>    
          </div>
        </div>
      </div>
    </div>
  </div>

## 回報流程
請自行新增一個 HackMD ，依照上面格式，回答 3 個題目，再到下方作業投稿區提交，可參考範例投稿。

## 作業投稿區(學員自行投稿)
1. [WangShuan 範例投稿(含答案)](https://hackmd.io/ZiZqNyCaRHGYHKdozZyffg?view)
1. [黃士桓](https://hackmd.io/PoPl-KXZRVquZgyCC_Bb7g?view)
2. [翁偉凌](https://hackmd.io/@wengweiling/HkFwHrQtO)
3. [河豚](https://hackmd.io/T3vj_cq6Q-epTf27pVLP6Q?view)
4. [YuSung](https://hackmd.io/ebrz6BRjTqSvBjgwsPQ_zA?view)
5. [curryLee](https://hackmd.io/brPqLZYmRP-rBrWF0A-w_A)
6. [小詹](https://hackmd.io/@4ePZafOvQveWfJ8tSSKIrw/H1brJqQY_)
7. [JasonLu](https://hackmd.io/7eag0ztrS0qFYkSVNCKuWg)
8. [Eva](https://hackmd.io/@gPeowpvtQX2Om6AmD-s3xw/Sknh357YO)
9. [Nielsen](https://hackmd.io/FdBVkI_wSmylknVGD6jBhw?both)
10. [Liu Xuan](https://hackmd.io/@LiuXuan/ryZSEpmYd)
11. [威威](https://hackmd.io/VLHRBLrvRROuOikFHan1bA?view)
12. [林振順](https://hackmd.io/Lop_WknTT3i6cOJ713TmFA?view)
13. [Cate](https://hackmd.io/@Cate-Chang/BJWxy1HK_)
14. [Wallace](https://hackmd.io/FbbebftDT0mXcG7i53zgPg?view)
15. [Joe Kuo](https://hackmd.io/@xONbQ_ROQn2-zSf3C2xQ4A/HkHveWSKO)
16. [quartzdill](https://hackmd.io/@sNWpyLwET8WMf13aaL4Xog/ByWoiUHYd)
17. [阿丁兒](https://hackmd.io/IhAlociMTFKlt16J2PFs3Q?view)
18. [leolee](https://hackmd.io/Oo9I91qfQoqOHrdVlm_xKg)
19. [RitaHuang](https://codepen.io/Rita-Rossweisse/pen/XWMMpQo?editors=1000)
20. [wendy](https://hackmd.io/Lybkhc_LRUW-TW6bXDK3ag)
21. [Hi Annie](https://hackmd.io/@tel1QbHlStm6HsLLcna8xw/H1nkBE0bO)
22. [LTL](https://hackmd.io/g2wZK23HR-SXN5yZ4vHQ7w?)
23. [Anita](https://hackmd.io/@kjKDxOASTHuUjNNSatDeXA/Sysl0Twtu)
24. [daniel](https://hackmd.io/@aBif61VXQ0-qR4NaWk9hYA/H1oMbRvF_)
25. [Eric](https://hackmd.io/LKYL5W9bTIKPuVpXDpKthg?view)
26. [豆漿紅](https://hackmd.io/zQ_9wWF3TLKAX6i5jr8gFQ)
27. [Vic](https://codepen.io/hsuan333/pen/WNpomLJ)
28. [kite](https://hackmd.io/@kite/rJXlMFdYu)
29. [小魚](https://hackmd.io/OI_lXBicQhGl1z-MFLXqpA)
30. [Shawn](https://hackmd.io/ymAtk8UNQPScDNHwe88Q4g?view)
31. [AhChao](https://hackmd.io/kpBbPEpOTIC_7bXzlhclPg?view)
32. [Landy](https://codepen.io/RandyChen/pen/abJWdpr?editors=1000)
33. [大昌](https://hackmd.io/@jswei014/BJqMxcdK_)
34. [KK](https://hackmd.io/DitFrnWJRO6rOoUfkeKtUA?view)
35. [Tori](https://hackmd.io/IBmC3uNeQZKxJhhsKeth6A?view)
36. [peter.chen1024](https://codepen.io/JIAN-RONG/pen/PopmZBJ?editors=1100)
37. [肉鬆](https://codepen.io/klrkicog/pen/BaWRKaV)
38. [youting](https://codepen.io/youtingluo/pen/RwpVaax)
39. [Ulysses](https://hackmd.io/MWe5VqWBRj6p9YcvFxvjnA?view)
40. [Yiren](https://codepen.io/Yiren_Liou/pen/zYZwqjo)
41. [烙詩](https://hackmd.io/H-iGrYoMRFWuo-VG7-sdpA)