--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/20 (五) 每日切版任務 - label ＆ input - list ## 題目 **請使用 Codepen 做出下列的切版** 圖中只提供大方向相關尺寸，請自行設計相關間距，或者參考 [todolist](https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList) 頁面相關資訊 ![](https://i.imgur.com/yrUH3dO.png) ![](https://i.imgur.com/A5HaEuU.png) <!-- ans: [label＆input](https://codepen.io/DoLucky/pen/vYdyNjM?editors=1100) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1. yunyun 答案： Codepen：https://codepen.io/yun_yunni/pen/eYVRmLR --> <!-- 2. Bruno Yu 答案： Codepen：https://codepen.io/bruno-yu/pen/NWygPLq --> <!-- 3. su#7798 codepen: https://codepen.io/wc-su/pen/GRQEgdL --> <!-- 4. RJRS#9430 codepen: https://codepen.io/RJRS/pen/bGLRdbp --> <!-- 5. Stanley#3825 codepen: https://codepen.io/sean_1215/pen/WNMOvME --> <!-- 6. Josh Chen#4552 codepen: https://codepen.io/hiphop825/pen/YzeQXMw --> <!-- 7. CloThEs codepen: https://codepen.io/bogwdnxx-the-sans/pen/PoQjqBb --> <!-- 8. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/eYVRNrL?editors=1111 --> <!-- 9. Peng https://codepen.io/peng-027/pen/dydRYjW --> <!-- 10. Noy https://codepen.io/MochiCodingPen/pen/XWZgmym --> <!-- 11. 楓之聲#6945 https://codepen.io/sshane258/pen/PoQjPPK --> <!-- 12. yuyu#6310 https://codepen.io/yuyu0905/pen/JjpJdyz?editors=1100 --> <!-- 13. Vicky Chang#8846 Codepen: https://codepen.io/cychang/pen/MWQoaKZ?editors=1100 --> <!-- 14. Chi Codepen: https://codepen.io/YoChi84/pen/eYVRJVv --> <!-- 15. Mitour#0672 codepen: https://codepen.io/mitour/pen/jOZwWdr --> <!-- 16. han#9437 codepen: https://codepen.io/qnrxylcw-the-reactor/pen/KKQqzMq --> <!--17. Aaron803 Codepen : https://codepen.io/narrowd4c/pen/WNMOrBw --> <!--18. Knn#0492 Codepen : https://codepen.io/Knn_84/pen/wvyeGyg --> <!--19. NaRa#7954 Codepen : https://codepen.io/chou-nara/pen/abqwvQZ --> <!-- 20. #EVC1876 Codepen: https://codepen.io/elvi-chuang/pen/LYQLGvJ?editors=1100 --> <!-- 21. hw#0715 https://codepen.io/Lhwei/pen/xxYrVMo --> <!-- 22.ㄚ華 https://codepen.io/jzkonzat-the-typescripter/pen/eYVRNqx --> <!-- 23. andersonshen#4675 https://codepen.io/luxyenni-the-bold/pen/BaYZzgG --> <!-- 24.IreneLee codepen:https://codepen.io/ntjtcxpt-the-animator/pen/JjpJKqE --> <!-- 25. LHchien https://codepen.io/lin_chien/pen/dydRoro?editors=1100 --> <!-- 26. Hao#2485 https://codepen.io/hao216/pen/BaYZKgd --> <!-- 27. Cheng-Yu#1813 https://codepen.io/ball77111/pen/ZEryBpv --> <!-- 28. Jason Chen https://codepen.io/jason60810/pen/VwQWjqz --> <!-- 29. Wang https://codepen.io/stevetanus/pen/rNJwMJy --> <!-- 30. Muse#9741 https://codepen.io/mu24/pen/NWygjGr --> <!-- 31.眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/mdXwrvg --> <!-- 32.鉦勝 #8333 CodePen: https://codepen.io/atckmax823/pen/QWQgMQw --> <!-- 33.lyle#8123 CodePen: https://codepen.io/tomys/pen/rNJwzWM --> <!-- 34. Joyce https://codepen.io/joycehuang/pen/abqwwog?editors=1111 --> <!-- 35.阿基基 https://codepen.io/JIJI_GNI/pen/LYQLyoY --> <!-- 36.雷雷#7844 https://codepen.io/lei-yi-jie/pen/jOZwLYP?editors=1100 --> <!--37.黑松胖#4836 CodePen:https://codepen.io/yi-chien-hsieh/pen/QWQggaZ?editors=0100 --> <!--38. Raymond Lam#0344 https://codepen.io/manshun-lam/pen/rNJwGeJ --> <!-- 39. Chaoci#2460 Codepen: https://codepen.io/gmailchao/pen/poawJZL?editors=1100 --> <!-- 40. 白狐 Codepen：https://codepen.io/baihu7851/pen/RwQgqpK --> <!-- 41. Triple https://codepen.io/riku30/pen/VwQWVve --> <!-- 42. Arista https://codepen.io/arista-hsieh/pen/xxYrmqd --> <!-- 43. skypassion5000#4151 Codepen：https://codepen.io/skypassion5000/pen/bGLROOG?editors=1100 --> <!--44. JustinLiu Codepen: https://codepen.io/justin0227/pen/KKQqJRX --> <!--45. hsiuhsiu Codepen: https://codepen.io/hsiuhsiu/pen/OJQgpLB?editors=1100 --> <!--46. Chaco#2993 Codepen: https://codepen.io/chaco-wang/pen/OJQgYLL?editors=1000 --> <!--47. Carrie#2750 Codepen: https://codepen.io/carrie-wang/pen/dydRwzd --> <!--48. Easton#3863 Codepen: https://codepen.io/EastonIsCodingNow/pen/KKQqLQv --> <!--49. Ayre#0016 codepen: https://codepen.io/yichunlin09/pen/abqwgzr --> <!--50. 小不點#1793 codepen: https://codepen.io/fwmfmgkx-the-flexboxer/pen/poawmML --> <!--51. Vera#5592 codepen: https://codepen.io/skvera/pen/GRQEyPL --> <!-- 52. Lina Chen Codepen:https://codepen.io/LinaChen/pen/KKQqLVN --> <!-- 53. Erica Chen#6929 Codepen:https://codepen.io/ericachen/pen/QWQgooz --> <!-- 54. Cliff https://codepen.io/Cliff_hex/pen/qBxRGob --> <!-- 55. Cynthia1111 https://codepen.io/Cynthia1111/pen/LYQjZbE --> <!-- 56. ajhappy#6488 Codepen:https://codepen.io/ajhappy5438/pen/wvyqoKB --> <!-- 57. 小羅#9921 Codepen:https://codepen.io/peizhen0609/pen/yLvXwoG --> <!-- 58. J_u_d_y#5993 Codepen:https://codepen.io/J_u_d_y/pen/xxYLOMZ --> <!-- 59. Charlotte Lee Codepen:https://codepen.io/charlotte-lee/pen/poarNmp?editors=1100 --> Codepen: https://codepen.io/Adif/pen/PoQKGMv?editors=1100 <!-- 61. How#5806 Codepen:https://codepen.io/howtobefine/pen/BaYdWeg --> <!-- 62. amy芳#1385 Codepen:https://codepen.io/amy-chieng/pen/qBxXdog --> <!-- 63. SASIMI#5099 Codepen: https://codepen.io/sashimi1327/pen/oNEeWPO --> <!-- 64. xuan#0808 Codepen: https://codepen.io/xuan0915/pen/MWQvVNd?editors=1100 --> <!-- 65. bonnieli1414#4906 Codepen: https://codepen.io/bonnieli1414/pen/dydzKvQ?editors=1100 --> <!-- 66. Greta#0837 Codepen: https://codepen.io/gretali/pen/GRQvqpj --> <!-- 67. weihsin#5643 Codepen: https://codepen.io/weisin/pen/LYQjXGw --> <!-- 68. Katie Codepen: https://codepen.io/Katie24/pen/xxYLmeL --> <!-- 69 yen#5757 https://codepen.io/TZU-HUANG-YEN/pen/QWQMzpo --> <!-- 70. WilliamChou#7375 Codepen: https://codepen.io/williampo78/pen/YzexgjG --> <!-- 71. RayChen1996 https://codepen.io/raychen1996/pen/YzexBMm --> <!-- 72. 花禮湖燒#7359 Codepen: https://codepen.io/lai-pei/pen/ZErJwYB --> <!-- 73.yuling https://codepen.io/igzdflpu/pen/ExQvrKb --> <!-- 74. Mojito#6002 codepen: https://codepen.io/vu3xk41997/pen/eYVGpmr --> <!-- 75. 小天#7177 https://codepen.io/linyujing/pen/PoQOGbJ --> <!-- 76. JessieCho https://codepen.io/jessieCho/pen/YzeEOdQ --> <!-- 77. JackC https://codepen.io/key0329/pen/gOvXZYL --> <!-- 78. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/WNMOXoJ --> <!-- 79. Tori#1287 Codepen：https://codepen.io/FlyTori/pen/NWyweKa --> <!-- 80. ling chang#1024 Codepen：https://codepen.io/ling-chang/pen/KKQXryZ --> <!-- 81. danny123 codepen: https://codepen.io/binlandz123/pen/rNJprVm?editors=1000 --> <!-- 82. mei#8421 codepen: https://codepen.io/Shila-Chen/pen/gOvojWV?editors=1100 --> <!-- 83 muzz#0345 https://codepen.io/yunnnz/pen/MWQrYaq--> <!-- 84 EllieLo#9809 https://codepen.io/ellie-lo/pen/VwQxOLZ --> <!-- 85 Jumpye#8601 https://codepen.io/Jumpye/pen/OJQoWbg?editors=1100 --> <!-- 86. Jamie https://codepen.io/Wu220103/pen/VwQWpEE --> <!-- 87. Zera#6060 https://codepen.io/zera-tseng/pen/GRQGaMZ --> <!-- 88. Newman https://codepen.io/newmankz/pen/vYdJKqJ?editors=1100 --> <!-- 89. 艾芮絲#6060 https://codepen.io/wangyingju/pen/wvyNOyv -->