# 第 5 組 第一週小組任務
###### tags: `六角`,`網頁切版直播班-2021夏季`,`第一週小組任務

## 小組討論
* 會議時間：2021-07-05 20:00~21:30
* 線上討論畫面：

* 參與人員：共 6 名，名單如下。（含 Slack ID 和 暱稱）

| Slack ID| 暱稱 |
| -------- | -------- |
| UTDM5L925 | 雅喬 |
| U01K3LKTB1C | Alvin Chu |
| U020U997G0P | 葉小嵐 |
| U01Q9D820FL | Gill |
| U01Q11LDQKH | Double C |
| UJ2RRLNU9 | moitw |

<br>

## 第一題
請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。
| 暱稱 | 職業分析 | 測驗結果畫面 |
| -------- | -------- | -------- |
| Alvin Chu | 調停者 INFP-T| [畫面](https://files.slack.com/files-pri/TH78FC3JL-F0273FH4399/image.png) |
| Gill | 執行官 ESFJ-A| [畫面](https://files.slack.com/files-pri/TH78FC3JL-F027T0A80NL/2021-07-05_15-10-17.png) |
| 葉小嵐 | 探險家 ISFP-T| [畫面](https://files.slack.com/files-pri/TH78FC3JL-F026NJ2HVMM/_____________5-7-2021_202118_www.16personalities.com.jpeg)|
| DoubleC | 守衛者 ISFJ-A| [畫面](https://files.slack.com/files-pri/TH78FC3JL-F026WHQRYVC/personal.png)|
| 雅喬 | 主人公 ENFJ-A| [畫面](https://files.slack.com/files-pri/TH78FC3JL-F026WP9RV6J/image.png)|

<br>

## 第二題

### 選擇題

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

> **Ans:92~93px**

<br>

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

> 36+(16*1.5+24)*2+90=222
> **Ans:222px**

<br>

## 第四題
請問 .card 的寬度與高度各是多少？(請不要用瀏覽器觀察)

> width：50+3+20*2=93
> height：50+3+202=93
> **Ans:寬高階是93px**

<br>

## 第五題
請優化此[程式碼](https://codepen.io/liao/pen/OJyLOzr)，優化重點為：
* 在不影響外觀情況下，試著將不必要的 CSS 移除或整合
* 請不用更動 HTML 程式碼，僅需優化 CSS 程式碼

#### CSS

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

<br>

## 第六題

請優化此[程式碼](https://codepen.io/liao/pen/qBOWPea)，並將程式碼連結放到 Codepen 上。優化重點為：

* 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
* 可依照您設定的共用 class，適當調整 HTML 結構

> **Ans:[優化答案1](https://codepen.io/wave99487chu/pen/jOmWWye)、[優化答案2](https://codepen.io/tsuifei/pen/vYmLXgg)**

<br>

## 第七題

彼此討論 [pixel perfect kata](https://cacoo.com/diagrams/pZ1jUCICb1t4bSVc/1AEDF?reload_rt=1620962199126_0&)，你會如何透過 flexbox 來排版？

> **Ans:在.news>li和.main使用flex**
>