---
tags: 網頁切版直播班 - 2021 夏季班
---
# 第一週 第8小組任務

### 討論時間過程：

每週的小組任務預計分別於週六及隔週三的晚上8點進行。

### 7/7 8點當天參與人員及討論狀況


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


---
### 小組回答：
1. Tina Yen: 守衛者
2. Irean: 調停者
3. Tina：探險家
4. Leo: 守衛者

---

### 第二題 選擇題

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

#### HTML

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

---

### 小組回答：
Tina Yen: 2
Tina: 2
Irean: 2
Leo: 2

原因：老師在直播中分享圖片預設在下方會增加2-3px的留白。

---

### 第三題
請問 .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;
}

---
### 小組回答：
Tina Yen: 198px
Irene: 222px 答對!
Tina: 224px
Leo: 201px

請 Irene 說明原因：h1 36px+ P 16px x1.5x2+ margin-bottom 24px x2+ img 90px= 222px。

---

### 第四題
請問 .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;
}

---
### 小組回答：
Tina yen: 93px
Irean: 93px
Leo: 93px
Tina 臨時離開一下

答案：Width跟Height一樣 50px+3px+20px x2=93px

---

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

---
### 小組討論：

連結 (https://codepen.io/tlorfrnl-the-typescripter/pen/ExmVqoV)

---

### 第六題

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

* 在不影響外觀情況下，將重複的 CSS 樣式，獨立成一個共用的 class
* 可依照您設定的共用 class，適當調整 HTML 結構
---
### 小組討論：
連結 (https://codepen.io/tlorfrnl-the-typescripter/pen/yLbOvOd?editors=1100)

---

### 第七題

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

---

### 小組討論：
1. 要將.List跟.List-ad並排，因此外層.container(父層)下 display:flex;
2. 要將.List-items下的img跟.content並排，因此父層.List-items下 display:flex;


---
### 其他討論
大家都算是切版新手，彼此分享自己切版遇到的狀況，看到切版班大家積極的練習急速切版都覺得很厲害。雖然大部分都是兼職練習，但是都漸漸的以養成習慣為目標～～