--- tags: 公益程式體驗營 - 2022 --- # 🏅 5/17(二) 每日切版任務 - position 趣味小練習 ## 題目 * 用 Codepen 練習以下畫面，目前提供相關資訊(如圖所示)，其餘尺寸請自行計算。 ![](https://i.imgur.com/9I7b2tr.png) ![](https://i.imgur.com/UNRUyMc.png) <!-- ans: position](https://codepen.io/DoLucky/pen/yLvaydW?editors=1100) --> --- ## 回報流程 1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報 （也可以將答案直接貼至「回報區」） ![](https://i.imgur.com/vftL5i0.png) <!-- 解答： --> 回報區 --- <!-- 1.IreneLee codepen: --> <!-- 2. CloThEs Codepen：l --> <!-- 3. Bruno Yu Codepen：w --> <!-- 4. yunyun Codepen：https://codepen.io/yun_yunni/pen/wvygZMa --> <!-- 5. JackC Codepen：https://codepen.io/key0329/pen/vYdgMYb --> <!-- 6. su#7798 codepen: https://codepen.io/wc-su/pen/oNEBOxQ --> <!-- 7. Jenny_ codepen: https://codepen.io/Jenny_000/pen/eYVgoYR --> <!-- 8. 阿基基 https://codepen.io/JIJI_GNI/pen/wvygZKa --> <!-- 9. hw#0715 https://codepen.io/Lhwei/pen/BaYpEmK --> <!-- 10. Jason Chen https://codepen.io/jason60810/pen/GRQrLvR --> <!-- 11. Muse#9741 codepen: https://codepen.io/mu24/pen/bGLgJLB --> <!-- 12. 翁來#9380 codepen: https://codepen.io/wguo8320/pen/abqpxjQ --> <!-- 13. Bao #4997 codepen: https://codepen.io/baoh/pen/zYRNXyM?editors=1100 --> <!-- 14. han #9437 Codepen：https://codepen.io/qnrxylcw-the-reactor/pen/mdXRYPO --> <!-- 15. Lemon Codepen：https://codepen.io/shumhoyin/pen/JjpEVoZ --> <!-- 16. 楓之聲#6945 Codepen:https://codepen.io/sshane258/pen/JjpEqdg --> <!-- 17. JustinLiu Codepen: https://codepen.io/justin0227/pen/MWQJdKP?editors=1100 --> <!-- 18. Cliff https://codepen.io/Cliff_hex/pen/RwQKaZg --> <!-- 19.Noy https://codepen.io/MochiCodingPen/pen/JjpEqWj --> <!--20. will0708#7730 https://codepen.io/ncrdpepc-the-lessful/pen/QWQdRYz?editors=1100 --> <!-- 21. Hao#2485 https://codepen.io/hao216/pen/poaRmGB --> <!-- 22. RJRS#9430 https://codepen.io/RJRS/pen/NWydZNJ --> <!-- 23. Tori#1287 https://codepen.io/FlyTori/pen/vYdgqLp --> <!-- 24. LHchien https://codepen.io/lin_chien/pen/vYdxBKK?editors=1100 --> <!-- 25. yuyu#6310 https://codepen.io/yuyu0905/pen/poaRBBa?editors=1100 --> <!-- 26. Katie https://codepen.io/Katie24/pen/bGLgPYy --> https://codepen.io/Adif/pen/ExQZBVy?editors=1100 <!-- 27. Stanley#3825 https://codepen.io/sean_1215/pen/WNMRqdV --> <!-- 28. Lyndon#6018 https://codepen.io/jvvkahjx-the-lessful/pen/MWQJMPe --> <!-- 29. NaRa#7954 https://codepen.io/chou-nara/pen/RwQKmmj --> <!-- 30. Raymond Lam#0344 https://codepen.io/manshun-lam/pen/poaRXbz --> <!-- 31. Peng https://codepen.io/peng-027/pen/ZErLgxr --> <!-- 32. Tuhacrt#0008 Codepen: https://codepen.io/Tuhacrt/pen/eYVgwZp --> <!-- 33. EG#7172 CodePen: https://codepen.io/paneg-jpeg/pen/OJQWKjy --> <!-- 34. 眠瀾#8857 CodePen: https://codepen.io/laron9486/pen/yLvgmvz --> <!-- 35. Chaoci#2460 > codepen:https://codepen.io/gmailchao/pen/PoQWvLR > --> <!-- 36. kuo https://codepen.io/sunny-sun/pen/vYdgomq --> <!-- 37. How#5806 https://codepen.io/howtobefine/pen/WNMpeeZ --> <!-- 38. Joyce https://codepen.io/joycehuang/pen/ExQZqmR?editors=1100 --> <!-- 39. Mylène codepen: https://codepen.io/hamajibashi/pen/KKQaOOQ --> <!-- 40. Mitour#0672 https://codepen.io/mitour/pen/mdXWbrO --> <!-- 41. 雷雷#7844 https://codepen.io/lei-yi-jie/pen/NWypKaY --> <!-- 42. 小不點#1793 https://codepen.io/fwmfmgkx-the-flexboxer/pen/XWZMWaj --> <!-- 43. Knn#0492 https://codepen.io/Knn_84/pen/WNMpbvr --> <!-- 44. Van.CS #2067 codepen: https://codepen.io/fbacojji-the-selector/pen/yLvMyYg --> <!-- 45. ajhappy#6488 codepen: https://codepen.io/ajhappy5438/pen/bGLqNpV --> <!-- 45. 黑白兔#0684 codepen: https://codepen.io/johnny329/pen/ZEreEde --> <!-- 46. #EVC1876 codepen: https://codepen.io/elvi-chuang/pen/YzeZzOj --> <!-- 47. Chaco#2993 codepen: https://codepen.io/chaco-wang/pen/RwQpNqN --> <!--48. Jamie https://codepen.io/Wu220103/pen/ZErLgRx --> <!--49. lyle#8123 https://codepen.io/tomys/pen/JjpWYGE --> <!--50. Erica Chen#6929 https://codepen.io/ericachen/pen/NWypqyM --> <!-- 51. 小天#7177 https://codepen.io/linyujing/pen/rNJyOJM --> <!-- 52. Josh Chen#4552 https://codepen.io/hiphop825/pen/xxYqwvY?editors=1100 --> <!-- 53. RayChen#6088 https://codepen.io/raychen1996/pen/GRQWoKL --> <!-- 54. Cynthia1111 https://codepen.io/Cynthia1111/pen/ZEreQJa?editors=1100 --> <!-- 55. bonnieli1414#4906 https://codepen.io/bonnieli1414/pen/GRQWZoj --> <!-- 56. Carrie#2750 codepen:https://codepen.io/carrie-wang/pen/vYdxLbE --> <!-- 57.HiyukiOuO # 8072 codepen:https://codepen.io/Befei/pen/jOZBWJG --> <!-- 57.WilliamChou#7375 codepen:https://codepen.io/williampo78/pen/ZEreWVd --> <!-- 58. 小鹿Kerwin#5730 codepen:https://codepen.io/tkoleo84119/pen/xxYqOER --> <!-- 59. 浪裡小白龍#6860 codepen:https://codepen.io/Emillo/pen/gOvmMZq?editors=1100 --> <!-- 60. hsiehld#2395 codepen:https://codepen.io/hsiehld/pen/BaYWKgV --> <!-- 61. rubyruby codepen: https://codepen.io/Ruby0831/pen/PoQpGwr --> <!-- 62. Triple https://codepen.io/riku30/pen/QWQpEjo --> <!-- 63. hsiuhsiu codepen: https://codepen.io/hsiuhsiu/pen/RwQpRxJ --> <!-- 64. Kiwi #9804 codepen: https://codepen.io/kiwi1113/pen/yLvMaBa --> <!-- 65. 黑松胖#4836 codepen: https://codepen.io/yi-chien-hsieh/pen/rNJyepg?editors=1100 --> <!-- 66. Chi Codepen: https://codepen.io/YoChi84/pen/VwQpKaq --> <!-- 67. deveryone#8090 https://codepen.io/raycheng/pen/eYVvdvG?editors=1100 --> <!-- 68. Easton#3863 Codepen: https://codepen.io/EastonIsCodingNow/pen/RwQpGom --> <!-- 69 singend#0876 https://codepen.io/singend/pen/jOZBVQQ --> <!-- 70 Omi#3467 https://codepen.io/chian0501/pen/RwQpKwj --> <!-- 71 ling chang#1024 https://codepen.io/ling-chang/pen/OJQpbyp --> <!-- 72 Jia-Hong Chen#3863 https://codepen.io/iloveleon19/pen/yLvMgBW --> <!-- 73 muzz #0345 https://codepen.io/yunnnz/pen/mdXWREx--> <!-- 74 Vera#5592 https://codepen.io/skvera/pen/gOvmmEP --> <!-- 75 amy芳#1385 https://codepen.io/amy-chieng/pen/oNEZZWQ --> <!-- 76 andersonshen#4675 https://codepen.io/luxyenni-the-bold/pen/xxYqdRo --> <!-- 77. yen#5757 https://codepen.io/TZU-HUANG-YEN/pen/oNEZevy?editors=1100 --> <!-- 78. Jean https://codepen.io/jean-liu/pen/mdXWLeo --> <!--79. TunacanBoy#2206 https://codepen.io/JamesDesign/pen/abqJGYj --> <!-- 80. Leo Song https://codepen.io/sunnylaba/pen/vYdxroZ?editors=1100 --> <!-- 81. 安安你好你是誰#7416 https://codepen.io/leave3310-the-looper/pen/RwQpewP?editors=1100 --> <!-- 82. 花禮湖燒#7359 https://codepen.io/lai-pei/pen/NWypEde?editors=1100 --> <!-- 82. Cheng-Yu#1813 https://codepen.io/ball77111/pen/QWQpzzp --> <!-- 83. 白狐 Codepen：https://codepen.io/baihu7851/pen/xxYqwGE --> <!-- 84. Vicky Chang#8864 Codepen: https://codepen.io/cychang/pen/qBxrLmy?editors=1100 --> <!-- 85.Ayre #0016 Codepen:https://codepen.io/yichunlin09/pen/QWQpXgo --> <!-- 86.RyanLu#3642 Codepen:https://codepen.io/ryanlu1125/pen/jOZBvZy --> <!-- 87.yuling Codepen:https://codepen.io/igzdflpu/pen/jOZBgKy --> <!-- 88. Mojito#6002 codepen: https://codepen.io/vu3xk41997/pen/JjpNGVe --> <!-- 89. 諾拉#4800 codepen: https://codepen.io/Naomi_riayun/pen/XWZRgeb --> <!-- 90. xuan#0808 codepen: https://codepen.io/xuan0915/pen/jOZmGQx --> <!-- 91. skypassion5000#4151 codepen: https://codepen.io/skypassion5000/pen/YzeVYrR?editors=1100 --> <!-- 92. Dun Dun#9857 codepen: https://codepen.io/dundun/pen/WNMjyxj --> <!-- 93. 鉦勝 #8333 codepen: https://codepen.io/atckmax823/pen/JjpWbXg?editors=1100 --> <!-- 94 J_u_d_y#5993 Codepen:https://codepen.io/J_u_d_y/pen/MWQmLjQ --> <!-- 95 SASIMI#5099 Codepen: https://codepen.io/sashimi1327/pen/dydRXXX --> <!-- 96 weihsin#5643 Codepen: https://codepen.io/weisin/pen/dydRNvp --> <!-- 97 Arista Codepen: https://codepen.io/arista-hsieh/pen/PoQjjrB --> <!-- 98 ChaoChao https://codepen.io/EmiiilyJ/pen/XWZgEXQ --> <!-- 99 danny123 codepen:https://codepen.io/binlandz123/pen/MWQozXd --> <!-- 100 小羅#9921 codepen:https://codepen.io/peizhen0609/pen/GRQEzQJ --> <!-- 101 Lina Chen Codepen: https://codepen.io/LinaChen/pen/VwQWNBd --> <!-- 102 AmberC#1372 Codepen: https://codepen.io/AmberChuang/pen/XWZgwox?editors=1100 --> <!-- 103 Greta#0837 Codepen: https://codepen.io/gretali/pen/xxYLxXx --> <!-- 104 Charlotte Lee Codepen: https://codepen.io/charlotte-lee/pen/YzexwbJ?editors=1100 --> <!--105 piha#9987 Codepen: https://codepen.io/pihahaha/pen/RwQLzea --> <!--106 JessieCho Codepen: https://codepen.io/jessieCho/pen/zYRPJpO --> <!-- 107. shujhen#7734 Codepen：https://codepen.io/shujhen/pen/bGLqVNQ --> <!-- 108. 家洋#6999 Codepen:https://codepen.io/yang940648/pen/wvypvGa --> <!-- 109. Zera#6060 codepen: https://codepen.io/zera-tseng/pen/YzeYYgZ --> <!-- 110. mei#8421 codepen: https://codepen.io/Shila-Chen/pen/zYRpaNq --> <--111. CrystalD#6007 codepen:https://codepen.io/Crystaldu/pen/bGLLZGJ --> <!-- 112. EllieLo#9809 codepen: https://codepen.io/ellie-lo/pen/yLvvwQM --> <!-- 113. YC#2008 Codepen: https://codepen.io/danisternburg/pen/poaamEq?editors=1100 --> <!-- 114. H2CO3#7232 Codepen: https://codepen.io/guan-zhen-wang/pen/xxYWVbK?editors=1100 --> <!-- 115. COLOR#4378 Codepen:https://codepen.io/color0602/pen/NWyYXKx --> <!-- 116. Eileen#6454 Codepen:https://codepen.io/Eileen-io/pen/eYVLOoL --> <!-- 117. Jumpye#8601 Codepen:https://codepen.io/Jumpye/pen/mdXGOJg?editors=1100 --> <!-- 118. JOU#6876 https://codepen.io/joujoujou924/pen/qBxMzvb?editors=1100 --> <!-- 119. Zoey#0839 https://codepen.io/zoec/pen/bGLOabW --> <!-- 120. 艾芮絲#6060 Codepen: https://codepen.io/wangyingju/pen/MWQLbWR -->