使用 Discord、ZOOM 來討論,組員沒麥克風也可以一個人分享畫面,其他組員用文字討論,解答此問題集 **回報流程:** 1. 請組長到下方回報解答連結,**一個小組請派一人提交(依據當周條件提交)**。回報內容需含: 1. 該問題集的答案 2. 提供 1~3 張 Discord 或 ZOOM 對話截圖,確保有進行小組討論 3. 組員參與名單 2. 助教檢視過後,就會回覆 ✅ 來回報審核成功與否。 **常見問題:** Q:約時間討論的組員至少要幾位? A:至少兩位就可成團! Q:如果沒有分組,可以一起玩嗎? A:可以 ## 問題 以下題目皆有使用 Meyerweb CSS Reset。 ### 第零題 心理測驗 請做此[心理測驗](https://www.16personalities.com/ch),分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。 ![](https://i.imgur.com/g9RjngS.png) ### 第一題 分享您的背景給組員們~ 1.你的暱稱? 2.你是哪裡人,之前學校科系是念哪裡? 3.有做哪些性質的工作? 4.為什麼會想來參加這次切版直播班? 5.想特別在這堂課獲得什麼養分? 6.分享一個連你爸媽都不知道的小秘密,給你的組員們~ ### 第二題 選擇題 以下範例程式碼的 .text 高度是多少?(請不要用瀏覽器觀察) 1. 90px 2. 92~93px 3. 120px #### HTML ```htmlembedded= <div class="text"> <img alt="" src="logo.png" height="90" /> </div> ``` ### 第三題 請問 .box 的高度是多少?(請不要用瀏覽器觀察) #### HTML ```htmlembedded= <div class="box"> <h1>標題</h1> <p>段落</p> <p>段落</p> <img alt="" src="logo.png" height="90" /> </div> ``` #### CSS ```css= .box h1{ font-size: 24px; line-height: 36px; } .box p{ font-size: 16px; line-height: 1.5; margin-bottom: 24px; } .box img{ display: block; } ``` ### 第四題 請問 .card 的寬高與高度各是多少?(請不要用瀏覽器觀察) #### HTML ```htmlembedded= <div class="card"></div> ``` #### CSS ```css= .card{ width: 50px; height: 50px; border-bottom: 3px solid orange; border-right: 3px solid #000; background: #000; padding: 20px; } ``` ### 第五題 請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr),優化重點為: * 在不影響外觀情況下,試著將不必要的 CSS 移除或整合 * 請不用更動 HTML 程式碼,僅需優化 CSS 程式碼 ### 第六題 請優化此[程式碼](https://codepen.io/liao/pen/qBOWPea),並將程式碼連結放到 Codepen 上。優化重點為: * 在不影響外觀情況下,將重複的 CSS 樣式,獨立成一個共用的 class * 可依照您設定的共用 class,適當調整 HTML 結構 ### 第七題 彼此討論 [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF?reload_rt=1620962199126_0&),你會如何透過 flexbox 來排版? --- ## 回報區 - [ ] [第 0 組](https://hackmd.io/) - [ ] [第七組](https://hackmd.io/@Theodoree/H1ePptivA) - [ ] [第 3 組](https://hackmd.io/@Kay945/BkjRdC8D0) - [ ] [第 2 組](https://hackmd.io/oVLLyi6CTZa2pNfb4QOL4g) - [ ] [第 5 組](https://hackmd.io/1P5yg2BmQvGPED9bQrDMTw) - [ ] [第 4 組](https://hackmd.io/fbf9UWSnTz6ZNbkeyQUPiQ) - [ ] [D-2組](https://hackmd.io/@0nPGcgMUTs2wJQ7hgyzkzg/ryG1LDmuC) - [ ] [第 1 組](https://hackmd.io/@q7_XO6E9RVmuG5gGoPrJIQ/HkDISfW_R) - [ ] [D-4組](https://hackmd.io/@hanchen/B1QdllnI0) - [ ] [A-9組](https://hackmd.io/LvSmDk15TdSRdWK8CqAWww?view) - [ ] [C-單組]()