## 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及帳號名字消失

右側 sidebox 不見

下方隱私權聲明與會員使用條款從第一行掉到第二行，

mobile時(767px)
Logo 移至上方

上方iT徵才、Tag、聊天室、鐵人賽、鐵人發文按鈕消失

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

---

`Ｗei Lin`

### 斷點：
1200px, 1160px, 992px, 856px, 768px, 600px
### 1200px以上
* 內文寬度固定1170px

### 1160px以上
* header最寬1170px

### 992px~1159px
* 內文寬度92%

### 992px以下
* 內文裡，原本兩欄變成一欄，rightside不見，只剩leftside

#### 856px~1159px
* header寬度有微調小2%

### 768px~991px
* 內文寬度固定750px
### 600px 以下

* header h1的width從14%變成100% logo移至上方，變大，右邊內容往下移
* header 多了padding

`Roger Hsia`
Pc

Ipad 992-768
右邊鐵人賽精彩文章改為看不見display:none

廣告banner改為滿版,原本

767
Menu tag 只剩2個link(技術問答與技術文章)
技術問答與標籤由space-between 改為由上到下排列

600
It幫幫忙logo 由左右並排改為上下排列

563
評論區由置中改為開頭上方

---

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

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

slack上：

---

## 討論截圖：

討論it邦網站：

討論第三週任務


## 助教回覆

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