---
tags: 網頁切版直播班 - 2022 夏季班
---
# 第一週小組任務 - 切版班 12 組
> 討論日期及時間 > 2022/07/09 20:30-23:24
>
**組員參與名單(8/10)：**
* christina#6185
* yuyu#6310
* hungya#0773
* DoraHuang#8223
* yichih#6223
* Wei-Ting#7691
* Winnie Wu#5468
* 此暱稱已被使用#6514

## 問題集的答案
### 第零題 心理測驗
:::spoiler <font color="blue">christina#6185</font>
:::

:::spoiler <font color="blue">yuyu#6310</font>
:::

:::spoiler <font color="blue">hungya#0773</font>
:::

:::spoiler <font color="blue">DoraHuang#8223</font>
:::

:::spoiler <font color="blue">yichih#6223</font>
:::

:::spoiler <font color="blue">Wei-Ting#7691</font>
:::

:::spoiler <font color="blue">Winnie Wu#5468</font>
:::

:::spoiler <font color="blue">此暱稱已被使用#6514</font>
:::

### 第一題 分享您的背景給組員們~
大家互相自我介紹、聊天
### 第二題 選擇題
答：2. 92~93px

### 第三題
答： 222px

> hungya#0773告訴大家詳細算法:
> 36px(一個h1: 因行距36px > 字體大小24px) + 96px(兩個p (48px): 因一個p行距為16px1.5=24px, 再加上24px的margin推擠 , 為48px) + 90px(一個img圖片高度) = 222px

> yuyu#6310補充:
img 有兩個方法可以不會多px
1)vertical-align: middle;
2)display: block;
### 第四題
答： 寬:93px 高:93px
### 第五題

.wrap{
  width: 500px;
  margin: 0 auto;
  font-size: 20px;
}

### 第六題
[codepen連結(yuyu#6310)](https://codepen.io/yuyu0905/pen/YzaqgYx?editors=1100)
[codepen連結(hungya#0773)](https://codepen.io/hungya777/pen/eYMZQZw?editors=1100)
### 第七題
彼此討論 [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF?reload_rt=1620962199126_0&)，你會如何透過 flexbox 來排版？

* hungya#0773
* yuyu#6310
* 維新#6472
* [codepen連結(christina#6185)](https://codepen.io/yuyu0905/pen/YzaqgYx?editors=1100)
* Winnie Wu#5468
* [codepen連結(yichih#6223)](https://codepen.io/Ingridchen/pen/qBoNBNb)
* [codepen連結(維新#6472)](https://codepen.io/wei-shun-li/pen/ExEyyaq)

---

## 討論紀錄



---

> 謝謝今天有參與的同學們 :100:
<iframe src="https://giphy.com/embed/n988gduPMFC8w" width="480" height="270" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/david-mitchell-pointing-good-job-n988gduPMFC8w"></a></p>