---
# System prepended metadata

title: 全職鬥士1組 - 第3週小組任務

---

## 2020秋季切版直播班
# 全職鬥士1組 - 第3週小組任務


---

## 【參與者】
* Roger Hsia 
* Wei Lin
* 圈圈 
* Alex Hung
* Nate Yeh 
* Sam Hu

※這次有使用slack、以及Discord語音討論

---

## 【任務一】請組員們在線上討論，不看老師範例程式碼，從無到有做出 no.8 題目，並提供 codepen 檢視

### 【答】[codepen連結](https://codepen.io/wei-the-lessful/pen/wvWjqYG)


---

## 【任務二】IT 邦偵探遊戲

請找出 [IT 邦幫忙](https://ithelp.ithome.com.tw/)的網站，每個頁面的響應式設計的資訊：

。這網站總共有幾個斷點？
。請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖，例如：
* 有元素在 mobile 時被隱藏
* 在 200 像素以下時會顯示有漢堡選單
* 某某 class 元素在 iPad 會變成滿版

##【答】
1. 這網站總共有幾個斷點？  1200px, 1160px, 992px, 856px, 768px, 600px
2. 網站的巧思：
上方發問、發文、兩個icon及帳號名字消失
![](https://i.imgur.com/IT9EedX.png)

右側 sidebox 不見
![](https://i.imgur.com/TbDpcu0.png)

下方隱私權聲明與會員使用條款從第一行掉到第二行，
![](https://i.imgur.com/tvMvlzQ.png)

mobile時(767px)
Logo 移至上方
![](https://i.imgur.com/ivLgIud.png)

上方iT徵才、Tag、聊天室、鐵人賽、鐵人發文按鈕消失
![](https://i.imgur.com/KvJndVP.png)

------------------------

---

`Ｗei Lin`

### 斷點：
1200px, 1160px, 992px, 856px, 768px, 600px
### 1200px以上
![](https://i.imgur.com/3ngFUOd.png)
* 內文寬度固定1170px

### 1160px以上
![](https://i.imgur.com/OCmnnmh.png)
* header最寬1170px

### 992px~1159px
![](https://i.imgur.com/IpjCkpB.png)
* 內文寬度92%

### 992px以下
![](https://i.imgur.com/cHOubvz.png)
* 內文裡，原本兩欄變成一欄，rightside不見，只剩leftside

#### 856px~1159px
![](https://i.imgur.com/Tqt3nsh.png)
* header寬度有微調小2%

### 768px~991px
![](https://i.imgur.com/1aYI73l.png)
* 內文寬度固定750px
### 600px 以下

![](https://i.imgur.com/aToOAFo.png)
* header h1的width從14%變成100% logo移至上方，變大，右邊內容往下移
* header 多了padding
 
`Roger Hsia`
Pc
![](https://i.imgur.com/JhlZviI.png)
![](https://i.imgur.com/oZ8qCQ6.png)

Ipad 992-768
![](https://i.imgur.com/sckj3oH.png)
![](https://i.imgur.com/GqcdzZQ.png)
右邊鐵人賽精彩文章改為看不見display:none
![](https://i.imgur.com/avQCJ3t.png)

廣告banner改為滿版,原本
![](https://i.imgur.com/ZCFaWAL.png)

767
Menu tag 只剩2個link(技術問答與技術文章)
![](https://i.imgur.com/q5y4VyX.png)
![](https://i.imgur.com/UgLPVZH.png)
技術問答與標籤由space-between 改為由上到下排列
![](https://i.imgur.com/s6SD1dZ.png)

600
It幫幫忙logo 由左右並排改為上下排列
![](https://i.imgur.com/mLKW630.png)

563
評論區由置中改為開頭上方
![](https://i.imgur.com/rmsXFKu.png)





---

## 【任務三】討論第三週版型該怎麼做

這次的討論，以Lv1難度的表頭、表尾如何做為討論主題
以下貼一些討論圖片：

slack上：
![](https://i.imgur.com/jYxT3Kk.png)




---

## 討論截圖：


討論it邦網站：
![](https://i.imgur.com/IkEX5EO.png)

討論第三週任務
![](https://i.imgur.com/ZqnwcQb.png)

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

## 助教回覆

任務一的.banner width 可以在大一點，中間用間距去隔開，不建議用寬度去決定間距大小
其他沒什麼問題，恭喜各位完成第三週小組任務～