---
# System prepended metadata

title: 切版班-第一週小組任務-第二組

---

# 切版班-第一週小組任務-第二組

:::success
**小組討論時間：2022 年 07月 11 日 週一 晚上 8:00**
:::
## 第0題 心理測驗

[測驗網址](https://www.16personalities.com/ch)
### 組員心理測驗結果
| 組員           | 測驗結果                                                             |
| -------------- | -------------------------------------------------------------------- |
| Karol-Kuo#5287 | [表演者](https://www.16personalities.com/ch/esfp-%E4%BA%BA%E6%A0%BC) |
| choubree#4350  | [執政官](https://www.16personalities.com/ch/esfj-%E4%BA%BA%E6%A0%BC) |
| Benson#6763    | [守衛者](https://www.16personalities.com/ch/isfj-%E4%BA%BA%E6%A0%BC) |
| JarDar #6980   | [建筑师](https://www.16personalities.com/ch/intj-%E4%BA%BA%E6%A0%BC) |
| Shuo#1596      | [鑑賞家](https://www.16personalities.com/ch/istp-%E4%BA%BA%E6%A0%BC) |
| 香菜#6416      | [守衛者](https://www.16personalities.com/ch/isfj-%E4%BA%BA%E6%A0%BC) |
| 黃士桓#7654    | [表演者](https://www.16personalities.com/ch/esfp-%E4%BA%BA%E6%A0%BC) |
| Gloria#1328    | [建築師](https://www.16personalities.com/ch/intj-%E4%BA%BA%E6%A0%BC) |
|熊二#3824|[物流師](https://www.16personalities.com/ch/istj-%E4%BA%BA%E6%A0%BC)|
|Verien#0392    | [探險家](https://www.16personalities.com/ch/isfp-%E4%BA%BA%E6%A0%BC)|




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



| Discord Name | 暱稱 | 城市/學校/科系 | 工作性質 | 為何參加切版班 | 想獲得什麼養分 | 小秘密 |
| ------------ | ---- | --------- | -------- | -------------- | -------------- | ------ |
|Karol-Kuo#5287|Karol|台南/舞蹈系| 舞蹈教育  | 想要1px也不差               |                |        |
| JarDar #6980 | JarDar | 桃園/應用數學系  | 程式設計  | 想瞭解切版這回事 | 能理解切版的作法與程序 | @#@    |
|  choubree#4350 |  Bree  | 台南/視覺傳達設計 | 平面設計 | 想轉職 |  各種切版的技巧  |        |
|  Benson#6763 | Benson | 桃園/資訊管理學系 |   MIS   |  想轉前端  |  學習切版     |        |
|Gloria#1328| 若若 | 台中/教育學系 | 遊戲劇情企劃 | 想轉程式設計師 | 不斷前進的動力 | 小時候想要衛斯理當哥哥，嫁給原振俠。|
|熊二#3824|熊二|台北/電機系|專案主管|身為主管什麼都要學|前端切版能力|心無大志卻被老闆拉著跑|
|香菜#6416     |   香菜   |  桃園/數位多媒體設計系      | 美編         |      轉職前端 |      獲得切版技能   |        |
|  Shuo#1596      |   碩   |   桃園/電子工程光電與通訊     |  咖啡廳        |    想轉職前端            |       學習切版技能         |        |
|     黃士桓#7654         |  黃士桓  |   台北 \| 環境工程學系  |  前端 \| 設計   |  多練多學 參加可以督促自己!?   |  看看Tailwind    |        |
|Verien#0392              | 阿維     |桃園/資管系           |資管          |轉職                | 能夠將構思的想法寫出               |輪班工具人        |
## 第二題 選擇題
以下範例程式碼的 .text 高度是多少？(請不要用瀏覽器觀察)
1. 90px
2. 92~93px
3. 120px

#### HTML
```htmlembedded=
<div class="text">
  <img alt="" src="logo.png" height="90" /> 
</div>
```
#### 組員答案：
| # | 答案 | 
| -------- | -------- | 
| Shuo#1596  |  90px |
| choubree#4350 |  90px |
| JarDar #6980 | 92~93px|
| Benson#6763 | 92~93px|
| Karol-Kuo#5287 | 92~93px|
| Gloria#1328 | 92~93px|
|熊二#3824| 92~93px|
|香菜#6416| 90px|
|Verien#0392| 90px|

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

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

#### CSS
```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;
}
```
#### 組員答案：
| # | 答案 | 
| -------- | -------- | 
| Shuo#1596  | 36+(16x1.5+24)x2+90=222px
| choubree#4350 | 36+(16x1.5+24)x2+90=222px |
| JarDar #6980 | 36+(16x1.5+24)x2+90 = 222px |
| Benson#6763 | 36+(16x1.5+24)x2+90 = 222px |
| Gloria#1328 | 36+(16x1.5+24)x2+90 = 222px |
|熊二#3824|36+(16x1.5+24)x2+90 = 222px|
|香菜#6416|36+(16x1.5+24)x2+90=222px|
|Verien#0392| 36+(16x1.5+24)x2+90=222px|
 

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

#### HTML
```htmlembedded=
<div class="card"></div>
```
#### CSS
```css=
.card{
  width: 50px;
  height: 50px;
  border-bottom: 3px solid orange;
  border-right: 3px solid #000;
  background: #000;
  padding: 20px;
}
```
#### 組員答案：
| # | 答案 | 
| -------- | -------- | 
| Shuo#1596  | 寬50+3+20+20=93px 高50+3+20+20=93px
| choubree#4350 | width=50+3+20x2=93px // height=50+3+20x2=93px |
| JarDar #6980 | width= 50+20x2+3=93px, height=50+20x2+3=93px |
| Benson#6763 |寬50+3+20+20=93px, 高50+3+20+20=93px|
Karol-Kuo#5287|w=50+3+20+20=93px h=50+3+20+20=93px
| Gloria#1328 |寬：50+3+20+20=93px, 高：50+3+20+20=93px|
|熊二#3824|寬93px, 高93px|
|香菜#6416|寬50+3+20+20=93px 高50+3+20+20=93px|
|Verien#0392|寬=50+3+20+20=93px；高=50+3+20+20=93px|


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

#### 組員答案：[組員優化程式碼](https://)
| 組員 | CodePen |
| -------- | -------- | 
| Shuo#1596  | [codePen](https://codepen.io/chiangchungshuo/pen/PoRZrBx) |
| choubree#4350  | [codePen](https://codepen.io/BreeChou/pen/poLyOrE) |
| JarDar#6980 | [codpen](https://codepen.io/jardarpen/pen/eYMZQQp)|
|Benson#6763| [CodePen](https://codepen.io/kumashow/pen/GRxZPKY)|
|Karol-Kuo#5287| [CodePen](https://codepen.io/ting-yu-kuo/pen/abYZNoj)|
|香菜#6416|[CodePen](https://codepen.io/ss0022/pen/mdxEGVK)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/qBoadEy)|


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

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

#### 組員答案：[組員優化程式碼](https://)


| 組員 | CodePen |
| -------- | -------- | 
| 黃士桓#7654 | [codePen](https://codepen.io/shr-huan-huang/pen/zYWqoVO) |
| JarDar#6980 | [codepen](https://codepen.io/jardarpen/pen/MWVyzZY)|
|Benson#6763|[codepen](https://codepen.io/kumashow/pen/abYNPdy)|
|熊二#3824|[CodePen](https://codepen.io/BeckLai/pen/YzaGXyg)|

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

## 小組討論 紀錄
1.以第七題為主要討論內容,組員分享不同的切法並討論～
2.討論主線任務,分享遇到的問題,組員有的知道解決辦法,都熱心的分享～!
3.討論作業繳交方式及期限等等...
[](https://i.imgur.com/fI2p5to.png)

![](https://i.imgur.com/rzq9FFT.png)

![](https://i.imgur.com/AzRvlPi.png)

![](https://i.imgur.com/iyqlAqK.png)

![](https://i.imgur.com/GtqPOZC.png)

![](https://i.imgur.com/AEx5Dn3.png)


