---
tags: 切版小組任務
---

# 切版第14組 第一周小組任務

**小組成員有：**

| Slack ID | 組員名稱 | 參與討論 |
| -------- | -------- | ---------------- |
|U0261QDAK4P| WilsonHan |:heavy_check_mark:|
|UV6P71PEH | Ryan |:heavy_check_mark:|
|U0191JMT1JP| James |:heavy_check_mark:|
|U0104K469PH| 張綺凌 | |
|U023MK4HVH9| Ding |:heavy_check_mark:|
|U026BRSR5S7| Zin ||
|U0224P80AJD| Coco |:heavy_check_mark:|
|U025HB09EMR| Yvette |:heavy_check_mark:|
|U023BQHGW95| Ruby Chiang|:heavy_check_mark:|
|U02706NTRFA| Jason Li |:heavy_check_mark:|

## 第一題 心理測驗

### 題目

請做此[心理測驗](https://www.16personalities.com/ch)，分享自己的[測驗結果](https://www.16personalities.com/ch/%E7%B1%BB%E5%9E%8B%E6%8F%8F%E8%BF%B0)給您的組員。

### 組員回答

1. :heavy_check_mark: Coco 執政官

2. :heavy_check_mark: James 主人公

3. :heavy_check_mark: Jason Li 守衛者

4. :heavy_check_mark: Ding 探險家

5. :heavy_check_mark: WilsonHan 守衛者

6. :heavy_check_mark: Ruby Chiang 探險家

7. :heavy_check_mark: Yvette 主人公

### 對話截圖


## 第二題 選擇題

### 題目
以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)

1. 90px
2. 92~93px
3. 120px

**HTML**

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

### 組員回答

1. Coco
2. Jason Li
3. James
4. Ryan
5. Ruby Chiang
6. Yvette
7. WilsonHan

**答案皆為:two:**

### 對話截圖


## 第三題

### 題目

請問 .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 程式碼

### 組員回答

1. :heavy_check_mark: Coco

.wrap,.header,.main,.footer{
	width: 500px;
	margin: 0 auto;
  }
.header h2,.main p,.footer p{
	font-size: 20px;
}

2. :heavy_check_mark: James

.wrap {
  width: 500px;
  margin: 0 auto;
}
.header h2,.main p,.footer p{
  font-size: 20px;
}

3. :heavy_check_mark: Jason Li

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

4. :heavy_check_mark: Yvette

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

5. :heavy_check_mark: WilsonHan

[Codepen](https://codepen.io/wi0821/pen/KKmzgBr)

.wrap, .header,.main,.footer{
  width: 500px;
  margin: 0 auto;
}

.header h2,.main p,.footer p{
  font-size: 20px;
}

### 對話截圖


## 第六題

### 題目

請優化此[程式碼](https://codepen.io/liao/pen/qBOWPea)，並將程式碼連結放到 Codepen 上。優化重點為：
* 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
* 可依照您設定的共用 class，適當調整 HTML 結構

### 組員回答
1. :heavy_check_mark: Coco
https://codepen.io/coco35532442/pen/PomPRPZ

2. :heavy_check_mark: James
https://codepen.io/james_413/pen/WNjQJpa?editors=1100

3. :heavy_check_mark: Ruby Chiang
https://codepen.io/rubyyl0701/pen/ExmKjaK

4. :heavy_check_mark: WilsonHan
https://codepen.io/wi0821/pen/LYyNRJN

5. :heavy_check_mark: Yvette
https://codepen.io/yst2680/pen/VwbjYJm

### 對話截圖


## 第七題

### 題目

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

### 組員回答

1. :heavy_check_mark: Coco

2. :heavy_check_mark: James

3. :heavy_check_mark: WilsonHan

4. :heavy_check_mark: Yvette
https://codepen.io/yst2680/pen/MWmeOrJ?editors=1100

5. :heavy_check_mark: Ruby Chiang

### 對話截圖