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

## 問題

下方有提供部分程式碼，請試著在「...」的地方加上 flex 屬性完成剩下的版型，如圖：


HTML

<nav class="nav">
    <img src="https://www.filepicker.io/api/file/tNa2so2RRMuedpc2yydt" alt="logo" width="100">
  <ul class="nav-list">
    <li class="nav-item"><a class="nav-link" href="#">首頁</a></li>
    <li class="nav-item"><a class="nav-link" href="#">關於</a></li>
    <li class="nav-item"><a class="nav-link" href="#">產品</a></li>
    <li class="nav-item"><a class="nav-link" href="#">購物車</a></li>
  </ul>
</nav>

<div class="container">
  <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" width="200">
  <div class="card-body">
    <h2 class="title">標題文字</h2>
    <p class="subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti ipsum ab sit neque accusamus praesentium, quisquam veritatis perferendis ipsa aspernatur nulla!<a href="https://unsplash.com/photos/HlNcigvUi4Q">圖來自unsplash</a>
    </p>
    <a href="#" class="btn">點我</a>
      </div>
   </div>
</div> 

CSS

.nav{
  background-color: #e8eeea;
  padding: 0 10px;
  margin-bottom: 25px;
  ...
}
.nav-list{
  ...
}
.nav-link{
  text-decoration: none;
  color: #00cc99;
  padding: 5px 10px;
}
.container{
  width: 800px;
  margin: 0 auto;
}
.title{
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 5px;
}
.card{
  margin-bottom: 10px;
  ...
}
.card:nth-child(2){
  ...
}
.card:nth-child(2) .card-img{
   margin-right: 0;
   margin-left: 5px;
}
.card-img{
  margin-right: 5px;
}
.btn{
  width: 50px;
  padding: 8px 16px;
  color: white;
  background-color: #00cc99;
  text-decoration: none;
  display: block;
  margin-left: auto;
  text-align: center;
}

> nth:child(n) 的用法可以參考[此文章](https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048)的第 22 項

## 回報流程

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


<!-- 解答：[Codepen 範例](https://codepen.io/AliceChiang/pen/yLeKrGQ)
只需注意有 flex 註解的部分
-->

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

<!-- 1. 焦糖
Codepen: https://codepen.io/yen-kg/pen/BaWxxpw
-->

<!-- 2.孫
https://codepen.io/Sunne/pen/poeYegG -->

<!-- 3. 蔡明達
Codepen: https://codepen.io/bmzpfyxe/pen/jOBXRGN?editors=1100
-->

<!-- 4. Winnie
Codepen: https://codepen.io/winnie0208/pen/mdmOYmE
-->

<!-- 5. natsu
Codepen: https://codepen.io/natsu19/pen/XWRpmVX
-->

<!--6. 阿和
codepen: https://codepen.io/shnny/pen/dyWNZVW?editors=1100
-->

<!-- 7.Alpha
codepen: https://codepen.io/alphatero/pen/XWRMmzW
-->

<!-- 8. Vivian codepen:https://codepen.io/vivian1223/pen/gOWmamG -->

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

<!-- 10.肉鬆
codepen: https://codepen.io/klrkicog/pen/poPejPG
-->

<!-- 11. Vic
codepen:https://codepen.io/hsuan333/pen/eYWvpeq
-->

<!-- 12. YuriT
codepen:
https://codepen.io/wenfisht/pen/eYWvpga
-->

<!-- 13.Sam li
codepen:https://codepen.io/sam830623/pen/RwVpWxZ
-->

<!-- 14.Lina Chen
codepen: https://codepen.io/LinaChen/pen/XWRMmPb
-->

<!-- 15. Xing
codepen: https://codepen.io/xing10/pen/RwVpWdQ?editors=0100
-->

<!-- 16.yijun
codepen:
https://codepen.io/sandy3068/pen/XWRMmym
-->

<!-- 17. Sz
codepen: https://codepen.io/szyln/pen/ZEKebNG
-->

<!-- 18. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPejMz
-->

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

<!-- 20. Cate Chang
https://codepen.io/tutz/pen/MWmpaMY
-->

<!-- 21. youting
https://codepen.io/youtingluo/pen/poPegyv?editors=1100
-->

<!-- 22. Gill
https://codepen.io/Gill-Chin/pen/ExmWPYN?editors=1100
-->
<!-- 23. roger
https://codepen.io/rogerchuang/pen/rNmyOvN?editors=0100
-->

<!-- 24.harold
codepen: https://codepen.io/YuWin0805/pen/KKmWVVK
-->

<!-- 25. 大衛
codepen: https://codepen.io/exnsrpjc/pen/WNjprbB?editors=1100 -->

<!-- 26. Gui
codepen:https://codepen.io/guitimliu/pen/qBmrbXp
-->

<!-- 27. Kk
codepen:https://codepen.io/potatokaka/pen/qBmrbmp?editors=1100
-->
<!-- 28. 陳sam
codepen:https://codepen.io/euldpliv/pen/XWRMXNp
-->

<!-- 29.阿瓜
https://codepen.io/hoick/pen/PompZKL?editors=1100 -->

<!-- 30.Jun Chan
codepen:https://codepen.io/chujunchan/pen/XWRMXeR
-->

<!-- 31.kane0927
codepen:https://codepen.io/kane-lin/pen/RwVprLq
-->

<!-- 32.Dory
codepen: https://codepen.io/dorihung/pen/oNWZjGY?editors=1100
-->

<!-- 33. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/ExmWPmX
-->

<!-- 34. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/ExmWPdo
-->

<!-- 35. Cora
codepen: https://codepen.io/chakrafiregirl/pen/bGWqVRK
-->

<!-- 36. WilsonHan
codepen: https://codepen.io/wi0821/pen/LYyWGaJ
-->

<!-- 15. Scarlett史嘉
codepen:https://codepen.io/qoxttdjg-the-encoder/pen/jOmBWEg?editors=1100 -->

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

<!-- 37. Jemma
codepen: https://codepen.io/Jemma9/pen/poPeyze
-->

<!-- 38. Jean
codepen: https://codepen.io/jean-liu/pen/bGWqpjR
-->

<!-- 39. hellocrab
https://codepen.io/hellocrab/pen/XWRMdqx
-->

<!-- 40. 雷古娜
codepen：https://codepen.io/tinahopo/pen/yLbMeXO -->

<!-- 41. curry
codepen：https://codepen.io/Ted19851223/pen/BaRWKeZ -->

<!--42.Peggy Tsai
codepen:
https://codepen.io/pei-chi-tsai/pen/KKmWMmr -->

<!-- 43. Larry
codepen：https://codepen.io/manpower0708/pen/YzVZWEV?editors=1100 -->

<!-- 44. Fleur
codepen：https://codepen.io/swwlee/pen/rNmWZPv -->

<!-- 45. Jameskrauser
codePen: https://codepen.io/jameskrauser/pen/wvdJWqj?editors=1100
-->

<!-- 46. 阿熊
codepen: https://codepen.io/hsiungchi/pen/vYmxKdZ -->

<!-- 47. Karen Huang
codepen: https://codepen.io/Coding_Snorlax/pen/poPNXWM?editors=1100 -->

<!-- 48. Jameskrauser
codePen: https://codepen.io/lumedkle/pen/LYyWRPL?editors=1100
-->

<!-- 49. Eric-小偉哥
codePen: https://codepen.io/ericLoveDesign/pen/XWRMjmj?editors=1100
-->

<!-- 50. Archie
codePen: https://codepen.io/WuChengHua/pen/qBmrajp
-->

<!-- 51. Tansy
codepan: https://codepen.io/subarashii-huch09/pen/xxdqELX
-->

<!-- 52. Yao Lin
codepan: https://codepen.io/yaoyaoiii/pen/xxdqEzp
-->

<!-- 53. Summer.H
codepan: https://codepen.io/wan-chine/pen/gOWmwOd
-->

<!-- 54. Nate Lu
codepan: https://codepen.io/nate12/pen/bGWqwJV
-->

<!-- 55. Elaine Liu
codepen: https://codepen.io/elaine7598/pen/OJmpRdL
-->
<!-- 56. ZY Hsu
https://codepen.io/zihyin/full/eYWvBRr -->

<!-- 57. 林雨樞
codepen: https://codepen.io/FISH0701/pen/oNWZbdy
-->

<!-- 58. AKI
codepen:
https://codepen.io/akichen27/pen/poPeNWd
-->

<!-- 59. Irene Wang
codepen:
https://codepen.io/irene-wang-the-looper/pen/BaRWpQJ
-->
<!-- 60. Alvin Chu
codepen: https://codepen.io/wave99487chu/pen/ExmWZEj
-->

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

<!-- 62. Ryan
codepen: https://codepen.io/RyanYD/pen/ZEKeexB
-->

<!-- 63. Yurie
codepen: https://codepen.io/_u_jung/pen/YzVZVqb
-->

<!-- 64.Tracy曼娟
codepen: https://codepen.io/tracychien-the-encoder/pen/bGWqWqw
-->
<!-- 65.童筱涵
codepen: https://codepen.io/hsiaohan/pen/NWjpggz
-->

<!-- 66:yellamoon 巫樾
codepen:https://codepen.io/pwbzvqja/pen/YzVZQYZ
-->

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

<!-- 68:Jerry Yen
codepen:https://codepen.io/JerryYen/pen/NWjpgme
-->

<!-- 69:叻叻豬
codepen:https://codepen.io/ericxcode/pen/wvdJqwR
-->

<!-- 70. Jamie
codepen:https://codepen.io/JamieChenWs/pen/GRmWvQz
-->

<!-- 71.Carol LEE
https://codepen.io/chiashiunlee/pen/wvdJqOB
-->

<!-- 72. stepha
https://codepen.io/w1112yb/pen/ExmWvbX
-->
<!-- 73. Hi Annie
https://codepen.io/lhohdalu/pen/xxdqXrQ
-->
<!-- 74.黃士桓
https://codepen.io/shr-huan-huang/pen/zYwZPmG
-->

<!-- 75.peter.chen1024
https://codepen.io/JIAN-RONG/pen/XWRMzwm?editors=1100
-->

<!-- 76.Katie Zhao
https://codepen.io/katiezhao/pen/abWJEOB
-->
<!-- 77. Paisley Chien
https://codepen.io/canaerkk/pen/poPepgo?editors=1100
-->

<!-- 78. Jim Hwang
https://codepen.io/jimh1129/pen/oNWZpwE
-->

<!-- 79. anna
https://codepen.io/annhys/pen/abWJVjd
-->

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

<!-- 81. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/RwVpxqv
-->

<!-- 82. 吐司
Codepen: https://codepen.io/danielle-zhang/details/yLbMvrE
-->

<!-- 83. Sylvia-H
Codepen: https://codepen.io/Cosmosheart/pen/mdmRBGO?editors=0100
-->

<!-- 84. shanglin
codepen: https://codepen.io/rmovuagr-the-selector/pen/abWJYKv
-->

<!-- 85. 黃羽均
codepen:https://codepen.io/azzfgtpo/pen/QWvpowQ
-->

<!-- Yen https://codepen.io/Hoyi/pen/poPeWZa?editors=1100 -->

<!-- 87. 袁祥恩
codepen:
https://codepen.io/ovfxsavp-the-bashful/pen/rNmybpW?editors=1000
-->

<!-- 88.PHIL
codepen:
https://codepen.io/ctkeftjp-the-animator/pen/ExmWzwp
-->

<!-- 89. LTL
codepen:
https://codepen.io/ltlin93/full/OJmpYzM
-->

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

<!-- 90. Jocelyn
codepen:
https://codepen.io/enjoyful/pen/LYyWvPW?editors=1100
-->

<!-- 91. Shani
codepen: https://codepen.io/ShaniMa/pen/wvddwvB -->

<!-- 92. Una(點子數位)
codepen:
https://codepen.io/xbsapbas-the-vuer/pen/WNjjeww?editors=1100
-->

<!-- 93. Ariel
codepen:
https://codepen.io/Arielariel/pen/VwbbwyK?editors=1100
-->

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

<!-- 95. Charles
codepen: https://codepen.io/gemini9160/pen/PommogR
-->

<!-- 96.粘勝凱
codepen:https://codepen.io/Bingbingboom/pen/xxqYYrj
-->

<!-- 97. ZOE WU
Codepen: https://codepen.io/Zoechiueh/pen/WNjjvjG?editors=1100-->

<!-- 98. Joanna Chang
Codepen: https://codepen.io/polilu1985/pen/LYyypmN
-->

<!-- 99. Erin Huang
Codepen: https://codepen.io/ErinHuang/pen/OJmmjeY
-->

<!-- 100. Benson
Codepen: https://codepen.io/polarBear712/pen/zYwwpLN
-->

<!-- 101. Joe Kuo
Codepen: https://codepen.io/alertislow/pen/xxddpJr?editors=1100
-->

<!-- 102 axlrock1021
Codepen: https://codepen.io/lnjbmmxo/pen/dyWWKJa
-->

<!-- 103.周周
Codepen:https://codepen.io/jhoujhou-the-decoder/pen/yLbbENa -->

<!-- 104.黃小瑄
Codepen:https://codepen.io/5quvgp2z/pen/vYmZBqB -->

<!-- 105. Zooey
Codepen:https://codepen.io/noraneko0430/pen/ZEKyWwa?editors=1100
-->

<!-- 106. SihLe Huang
Codepen:https://codepen.io/bugbug777/pen/ZEKyOjV
-->

<!-- 107. Oober
Codepen:https://codepen.io/xtsjrjdv/pen/xxdrJLB
-->
<!-- 108. [Jeff H](https://hackmd.io/@jeff14994/H10xDlBq_/https%3A%2F%2Fhackmd.io%2F%40jeff14994%2FS1gzIsl6u%2F%252FFF7y1GkvRZG9GoZCOdFZ0A)-->

<!-- 109. [KinHei Shing]
9Codepen: https://codepen.io/kinhei-shing/pen/XWRgvOX
-->

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

<!-- 111.Ning
codepen:
https://codepen.io/fangninglin/pen/XWRRLZG -->
<!-- 112. ellie
https://codepen.io/hsu-yu/pen/QWvMmQg
-->

<!-- 113. 三隻小貓
https://codepen.io/bagelover/pen/VwbMLKr?editors=1100
-->

<!-- 114. 陳品宏
codepen:
https://codepen.io/wtka/pen/BaRwwQq
-->

<!-- 115. sarah
codepen:
https://codepen.io/sarah-wang/pen/ZEKXqzd?editors=0100
-->

<!-- 116. Zaii Hsu
codepen:https://codepen.io/ivy2846357/pen/jOmLWoj -->

<!-- 117. rose
codepen:https://codepen.io/roseling30/pen/QWvaEEL-->

<!-- 118. 魚魚
codepen:
https://codepen.io/YuYu_29/pen/XWRVzQe
-->

<!-- 119. Min Chun Tsai
codepen:
https://codepen.io/Tsai0926/pen/MWmrVaw
-->

<!-- 120. Mikan
codepen:
https://codepen.io/elaine706/pen/jOmZPZv
-->

<!-- 121. irene
Codepen：https://codepen.io/lohas1107/pen/OJmZNNM?editors=1100
-->

<!-- 122. WA
https://codepen.io/ldddl/pen/QWvxxyy
-->

<!-- 123. Jessie Cheng
https://codepen.io/JessieMosbi/pen/LYyrwYR?editors=1100
-->

<!-- 124. Newman
https://codepen.io/newmankz/pen/zYwLowE
-->

<!-- 125.Page
https://codepen.io/kanawin821/pen/eYWPqgP
-->

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

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

<!-- 128.keep
https://codepen.io/keep-/pen/ZEypbLx
-->

<!-- 129.Pocky
https://codepen.io/linlin_web/pen/yLopYew?editors=1100
-->