---
# System prepended metadata

title: 第三週小組任務 - 切版班 12 組
tags: [網頁切版直播班 - 2022 夏季班]

---

---
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 上做了哪些巧思：

![](https://i.imgur.com/PPQmTxc.png)
1. header 在不同螢幕大小的裝置上改變排版方式
＊在Mobile使用的話header和nav還有另一種顯示方式
![](https://i.imgur.com/wvh6mcC.png)

2. nav 在iPad上減少顯示的內容
3. 右邊的sidebar在Mobile時會隱藏
4. 技術問答旁邊的tab會在不同螢幕大小時改變顯示方式
5. 頁籤排版會根據螢幕寬度換行
 ![](https://i.imgur.com/kA2AC1T.png)

6. 文章的的排版會根據標籤數量或是長度來調整顯示方式![](https://i.imgur.com/8dme3Rs.png)
7. footer排版不同
 ![](https://i.imgur.com/fNk9XsU.png)

8.登入顯示不同
![](https://i.imgur.com/M95jACk.png)

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


---

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

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

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

答：
```
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

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


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

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


### 任務四：觀看 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)

![](https://i.imgur.com/no2NGl4.png)
![](https://i.imgur.com/3rZwMya.png)
![](https://i.imgur.com/iv8WgSg.png)
![](https://i.imgur.com/Y1kiAoc.png)
---

> 謝謝今天有參與的同學們 :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>