---
# System prepended metadata

title: 第二週團隊任務 - 體驗班 北25組

---

# 第二週團隊任務 - 體驗班 北25組
> 討論日期及時間 > 2023/05/16 20:00-21:00
> 
**組員參與名單(00 / 08)：**
- [ ] hui#9029
- [ ] Linneaa#2136
- [x] shen#6178
- [x] 66好窮（ruby)#2940
- [ ] ㄆㄆ#1688
- [x] 仙貝#6116
- [ ] 勁霖#1602
- [ ] 鴨鴨#3284



### 小組討論





## 問題

### 第一題：共同提交[切版任務作業一 - AI 工具王 - 產品優勢卡片設計]

| 組員名單                | 切版完成 | 
| ---------------        | -- | 
| hui#9029             |  |
| Linneaa#2136            |  |
| shen#6178              | https://codepen.io/shyane-shen/pen/rNqZWzQ |
| 66好窮（ruby)#2940     | :heavy_check_mark: https://codepen.io/xru/pen/Baqxepr | 
| ㄆㄆ#1688           |    | 
| 仙貝#6116          | https://codepen.io/XianBaDaSu/pen/jOevqbG | 
| 勁霖#1602          |  | 
| 鴨鴨#3284    |   |




### 第二題 Flex 精神時光屋(選做)

| 組員名單                | 切版完成 | 
| ---------------        | -- | 
| hui#9029             |  |
| Linneaa#2136            |  |
| shen#6178              |  |
| 66好窮（ruby)#2940     | :heavy_check_mark: https://docs.google.com/document/d/15OXcnXctPfnOMPf-ieavlRIdoc4Mdsn5AMzj9maa2BA/edit?usp=sharing | 
| ㄆㄆ#1688           |    | 
| 仙貝#6116          | 第十題，Codepen：https://codepen.io/XianBaDaSu/pen/MWPqyYQ  | 
| 勁霖#1602          |  | 
| 鴨鴨#3284    |   |


## 小組討論紀錄

使用 discord 討論串討論本周問題點

#### **分享切版任務的各自問題點及心得**

66好窮（ruby)#2940:
> 1.第一題:在讓卡片同高的方式下，可以用flex-direction:cloumn;+flex-grow:1; 去解決
> 2.第二題:可以用線去看格局排列

shen#6178 
第一題：
> 1. 因卡片p段落文字數量不一，導致卡片內資訊呈現的間距不一致，最後使用 .name{height: 118px;}制定高度後解決。
> 2. 透過隊友提醒後，發現卡片內圖片有hover放大效果，使用transform:scale產生效果，但發現有出框的問題，查找過後在外層加上overflow:hidden即可解決

仙貝#6116
第一題：
> 1. Figma可以匯出整頁的CSS檔案，可以直接套用，非常方便。
> 2. 圖片下方的文字描述區塊會因為字數多寡而有大小差異，固定高度後解決。(和shen#6178同樣的問題)
> 3. 分享icon有周圍有框線，經隊友提醒後已修正。
> 4. 字型與原稿有差，在隊友提醒後，已修正。
> 5. 經隊友提醒，發現圖片有hover效果，已修正。

第二題：
> 1. 因電腦縮放設定為150%，所以按照圖片上的PX去切版都會版面過大，以至於每個切版都被縮小比例切。後來調整瀏覽器縮放為75%時才看到正確大小。之後將再切第二次，重新切出正確的大小。
> 2. 多多練習真的有差，從前五題，每題都要花一個小時以上，到最後三題時，每題只花三十分鐘不到，可謂是肉眼可見的進步。

#### **使用 discord 語音討論**

![](https://hackmd.io/_uploads/BJLo9x-H2.png)

## 額外補充
https://blog.camel2243.com/2019/11/14/css-%E6%90%9E%E6%87%82-flex-grow-flex-shirk-%E5%8F%8A-flex-basis-%E4%B8%89%E7%A8%AE%E5%B1%AC%E6%80%A7/