---
# System prepended metadata

title: "全職鬥士1組-\U0001F3C5第三週小組任務筆記"

---

# 全職鬥士1組-🏅第三週小組任務筆記

# 問題集

這週主要是讓各位同學熟悉 RWD 操作，**請挑選兩個任務來做即可**。


## 任務一：不看老師範例程式碼，從無到有做出 [no.8](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing) 題目，並提供 codepen 檢視，[範例八程式碼介面下載](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing)
![](https://i.imgur.com/Q3PSVHt.png =200x)

:memo:討論：
[YU Codepen 連結](https://codepen.io/YCH06/pen/ZEbKjdg)
[Jimmy Codepen 連結](https://codepen.io/Jimmy_Wu/pen/qBOXmbP)

## 任務二：IT 邦偵探遊戲
請找出 [IT 邦幫忙的網站](https://ithelp.ithome.com.tw/)，每個頁面的響應式設計的資訊：
* 這網站總共有幾個斷點？
* 請描述這網站在 iPad、Mobile 上做了哪些巧思？請提供五處，並附圖

:memo:討論：我們主要以 PC 網頁版為主

1. 超前部屬的 banner 在 1199px 會爆版
 ![](https://i.imgur.com/qYD4r2f.png =500x)
 
2. `<div class="rightside"></div>` 在 992px 會消失
 ![](https://i.imgur.com/Mbff6Sx.png =500x)
 
3. `.container` 在 991px 時 width 會從 92% 變成 750 px
 ![](https://i.imgur.com/XZmYY8f.png =500x)
 
4. 在 767px 時，技術問答旁邊「最新、熱門、已解決」的選單會置中並均分，且 navbar 的選項會只剩下「技術問答」和「技術文章」
 ![](https://i.imgur.com/w9xARLd.png =500x)
 
5. 在 340px 時，「登入／註冊」旁的放大鏡會消失
 ![](https://i.imgur.com/0F6VaxI.png =500x)
<br>

## 任務三：討論第三週版型該怎麼做
一個人能力有限，八個人團結力量大，彼此討論該版型如何攻略，才能發揮團隊最強力量，攻破最終 BOSS
![](https://i.imgur.com/kkeeE5W.jpg)
![](https://i.imgur.com/ZuI7Pvl.jpg)






<!-- ![](https://i.imgur.com/7I2H1tP.png =500x)
![](https://i.imgur.com/QtzPQeT.png =500x)
![](https://i.imgur.com/Pu71RJ6.png =500x)
![](https://i.imgur.com/YZSj8f3.png =500x)
![](https://i.imgur.com/IAtQSbW.png =500x)
![](https://i.imgur.com/AUh7EsT.png =500x) -->