---
tags: 網頁切版直播班 - 2022 夏季班
---
# 第三週小組任務 - 切版班 12 組
> 討論日期及時間 > 2022/07/23 20:30-22:30
>
**組員參與名單(8/10)：**
* christina#6185
* yuyu#6310
* hungya#0773
* 維新#6472
* yichih#6223
* Wei-Ting#7691
* Winnie Wu#5468
* 此暱稱已被使用#6514
## 問題
### 任務一：請組員們在線上討論，不看老師範例程式碼，從無到有做出 [no.8](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing) 題目，並提供 codepen 檢視，[範例八程式碼介面下載](https://drive.google.com/file/d/1r8z8i3LzzEKIzDBlztkpFmuXK6EDyMx3/view?usp=sharing)
答：
hungya#0773 [Codepen](https://codepen.io/hungya777/pen/RwMgBqv)
yuyu#6310 [Codepen](https://codepen.io/yuyu0905/pen/eYMRjbR)
christina#6185 [Codepen](https://codepen.io/chrisc0210/pen/KKoqBGM)
### 任務二：IT 邦偵探遊戲

請找出 [IT 邦幫忙的網站](https://ithelp.ithome.com.tw/)，每個頁面的響應式設計的資訊：
答：
* 這網站總共有幾個斷點:24
* 這網站在 iPad、Mobile 上做了哪些巧思：

1. header 在不同螢幕大小的裝置上改變排版方式
＊在Mobile使用的話header和nav還有另一種顯示方式

2. nav 在iPad上減少顯示的內容
3. 右邊的sidebar在Mobile時會隱藏
4. 技術問答旁邊的tab會在不同螢幕大小時改變顯示方式
5. 頁籤排版會根據螢幕寬度換行

6. 文章的的排版會根據標籤數量或是長度來調整顯示方式
7. footer排版不同

8.登入顯示不同


---



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

答：

1. max-width來限制container寬度
2. 斷點
//992px 768px
//table
@media (max-width:992px){
    .class{
      width:100%
    }
}
//mobile
@media (max-width:767px){
    .class{
      width:100%
    }
    .nav-menu{    //選單
             width: 50%;     //兩欄
      }
}

3. 圖片設定
img{
max-width: 100%;
height: auto;
vertical-align: middle; 
}

4. 主要用Flex排版圖片, RWD




### 任務四：觀看 Gulp 影音課程(建議準備 1.5~2 小時，再來挑戰此任務)

上週有完成[任務三](https://hackmd.io/@christina6185/HJT_OLg2q)組員，有些也一起完成了這一題～

## Week 2 作業討論
> 圖片上傳到github無法顯示：需調整圖片路徑
＊[網頁相對/絕對路徑&語意化標籤網頁相對/絕對路徑&語意化標籤](https://medium.com/tsungs-blog/day28-%E7%B6%B2%E9%A0%81%E7%9B%B8%E5%B0%8D-%E7%B5%95%E5%B0%8D%E8%B7%AF%E5%BE%91-%E8%AA%9E%E6%84%8F%E5%8C%96%E6%A8%99%E7%B1%A4-7c386e8032ab)

---

> 謝謝今天有參與的同學們 :100:
<iframe src="https://giphy.com/embed/Hc8PMCBjo9BXa" width="335" height="480" frameBorder="0" class="giphy-embed" allowFullScreen></iframe><p><a href="https://giphy.com/gifs/applause-laughing-Hc8PMCBjo9BXa"></a></p>