---
tags: 網頁切版直播班 - 2022 夏季班
---

# 第一週小組任務

使用 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)給您的組員。


### 第一題 分享您的背景給組員們~
1.你的暱稱
2.你是哪裡人，之前學校科系是念哪裡？
3.有做哪些性質的工作？ 平面設計
4.為什麼會想來參加這次切版直播班？
5.想特別在這堂課獲得什麼養分？
6.分享一個連你爸媽都不知道的小秘密，給你的組員們~

### 第二題 選擇題

以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px

#### HTML

<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>

### 第三題
請問 .box 的高度是多少？(請不要用瀏覽器觀察)

#### HTML

<div class="box">
  <h1>標題</h1>
  <p>段落</p>
  <p>段落</p>
  <img alt="" src="logo.png" height="90" /> 
</div>

#### 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

<div class="card"></div>

#### 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/)
> ✅

- [x] [第 8 組](https://hackmd.io/XkcfDFB5RRyiyb5dAvXkLg?both)
- [x] [第 22 組](https://hackmd.io/@susu3131/r1xDuaDjq)
- [x] [第 12 組](https://hackmd.io/@LpBP_LpMRiCSQeQgBGNIpQ/christina6185)
- [x] [第 5 組](https://hackmd.io/5n3VgAJwSvCnnkd7MX-rmQ?both)
- [x] [第 3 組](https://hackmd.io/exbOCohDSii8xv4U4uXTTQ?both)
- [x] [第 2 組](https://hackmd.io/ef0HCheHQzSP5jqzPKzpRg)
- [x] [第 14 組](https://hackmd.io/@sheng0216/HkrgsQ_oc/%2FWCXroNVcQX21uR9t-e4xNA)
- [x] [第 31 組](https://hackmd.io/@U8lva1YNQaSPDqEVWNao5Q/rysNgMV2q) 組長:已修改
- [x] [第 29 組](https://hackmd.io/u6EsIcwNTBSZiR2IXRB9pQ)
- [x] [第 20 組](https://hackmd.io/NYLDHrM_SD-e1ohe4gV-Fg)
- [x] [第 6 組](https://hackmd.io/Tec3I6XpRMyUSJrmeHYchA)
- [x] [第 7 組](https://hackmd.io/@YIHQx96xTI-K9vDjhzEfDA/SJiKnqYi9/%2FyiEx7YeaRbC5tP5WTmI3Lg%3Fview)
- [x] [第 1 組](https://hackmd.io/eIe9zxM6Td29hVTtmnrJOg)
- [x] [第 18 組](https://hackmd.io/@YJ-Chen/Hy_QXTHj9/%2F2fS-XuX5QvaWS7aEeuuVKw)
- [x] [第 19 組](https://hackmd.io/PdWAoLuXSPSRTpLDC1bGIA)
- [x] [第 9 組](https://hackmd.io/D-JIsjZHTfCdDDhoNyAQjg?view)
- [x] [第 16 組](https://hackmd.io/@natsu19/SJlXMWBs9/%2FObPstkJYQd2crkiBnkf7LA)
- [x] [第 21 組](https://hackmd.io/@gfW814OqQNW3-GopXH4oRw/Sk1YT3Tj5/https%3A%2F%2Fhackmd.io%2FCJicouN1TuyeNI17tjZH6Q%3Fview)
- [x] [第 17 組](https://hackmd.io/6jVW2S4hQWWU74zDJxjpTg)
- [x] [第 23 組](https://hackmd.io/fgPJZmZ5TXCR7afSALkiww?view)
- [x] [第 26 組](https://hackmd.io/TJkjbn43TNWfYqfHAygBMA?both)
- [x] [第 13 組](https://hackmd.io/@ZCnote/rJ_zNTSoc/%2FHyIN8Trs5)
- [x] [第4組](https://hackmd.io/@Barret/SJ0TSDajc)
- [x] [第27組](https://hackmd.io/nFodoxoZQ3um8rQ8eWe5pw?both)
- [x] [第 30 組](https://hackmd.io/@jean8602/rkyylcTj5)
- [x] [第 11 組](https://hackmd.io/4Ck9zmLBSUSDRY715MD2kg?view)(連結錯誤已修正)
- [x] [第 28 組](/birXjtOkQvOWCHnhjiQYTA)
- [x] [第 15 組](/4TSidBI9RD6-Nx94z_UMZQ)
- [x] [第 24 組](https://hackmd.io/@tokqU8jtTCWXRYy3B_f2-A/BynIvxdo9)
- [x] [第 10 組](https://hackmd.io/EQ_DZVoYSYW6_H4s_wlPCQ?view)