---
# System prepended metadata

title: 第三週小組任務-25組

---

# 第三週小組任務-25組
時間7/25 21:00~23:00
[小組任務內容](https://hackmd.io/y0qdFEBfQwGtE7rEQiaWlg)
## 組員參與名單(Discord暱稱)
- [x]  CrystalD#6007
- [x] yanlin_liu#2191
- [x] Potatolee#7749
## 任務一：請組員們在線上討論，不看老師範例程式碼，從無到有做出 no.8 題目，並提供 codepen 檢視
|組員名稱|codepen|
|-------|------|
|potatoleee|[codepen](https://codepen.io/potatoleee/pen/JjLrNbq)|
|CrystalD|[codepen](https://codepen.io/Crystaldu/pen/VwXzodN)
|suihsilan#9485|[codepen](https://codepen.io/suihsilan/pen/QWmqqGq?editors=1100)
## 任務二：IT 邦偵探遊戲


## 這網站總共有幾個斷點？ 5個
1200 992 991 767 600


## 請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖，例如：
 
**1.max-width:992px,技術問答寬度880px**
![](https://i.imgur.com/kwVRURU.png)
**2.max-width:991px,技術問答寬度720px**
![](https://i.imgur.com/gmWmfDV.png)

**3.導覽列在767的時候會隱藏四個選項**
![](https://i.imgur.com/CXfGLmv.png)

![](https://i.imgur.com/fTjN0pg.png)
**4.max-width:992px,右邊側欄aside被隱藏**
![](https://i.imgur.com/1qUjxQ7.png)
![](https://i.imgur.com/Jt5tcvf.png)

**5.max-width:600px, iT邦幫忙logo變大**
![](https://i.imgur.com/IFEAuVc.png)
![](https://i.imgur.com/cnIqvvF.png)
**6.max-width:600px, iT邦幫忙排列從併排到頂部**
![](https://i.imgur.com/IFEAuVc.png)
![](https://i.imgur.com/cnIqvvF.png)

![](https://i.imgur.com/t0i0SKT.png)
![![](https://i.imgur.com/AKEgiVE.png)
![](https://i.imgur.com/PFyH3ww.png)

## 任務三：討論第三週版型該怎麼做
1.如果用gulp,layout共用版塊有header footer
2.rwd media 寫在最靠近的地方比較好找
3.footer 要注意考慮到手機版![](https://i.imgur.com/X58DlPC.png)
4.有討論gap 跟 vmin的屬性
5.可以練習使用scss的變數管理顏色
6.門市據點樣式可以共用
![](https://i.imgur.com/d3ZHawp.png)
![](https://i.imgur.com/MGbfuxb.png)
7.斷點max-width:992px for 平板
     max-width:767px for 手機
## 任務四：觀看 Gulp 影音課程(建議準備 1.5~2 小時，再來挑戰此任務)
|組員名稱|網站網址|
|-------|------|
|Potatolee#7749|[網址](https://potatoleee.github.io/gulp0718/)|
|suihsilan#9485|[網址](https://suihsilan.github.io/test12345/)|







