# 第三週｜RWD 小組任務 Team1
###### tags: `2021程式體驗營` `TeamWork_Week3` `team1`
**組別**：第一組
**參加組員**：Jiang V, Anita, kevinhuang, Summer.H, Sz, Xing

[第三週直播講義](https://hackmd.io/d9vlvFMlSZ2BBxBX2OWTag?view)

# 第一題 - 討論香水電商版型攻略

一起討論你觀察到香水電商在 Mobile、PC 上有哪些變化，以及你預期會如何做，目前有哪幾個細節有卡住，透過小組力量一起解除疑惑！
## navbar
:::spoiler 如圖
:::
<br>

>jQuery 下拉選單
https://codepen.io/viccjiang/pen/dyvLZMa
>[name=Jiang V 分享][color=#A7E683]

>如果是從 bs 的 navbar 去改
把 cart 放在 nav-item 的 ul 外面，再調整他的順序
但設定可能會跟預設的 navbar 有點不一樣
要再參考一下 bs 裡的 variables.scss 裡面 navbar 的預設
>[name=Sz 分享][color=#BB84F5]

## Apple Cider Vinegar Capsule
:::spoiler 如圖
:::
<br>

>需要 position 的功能，然後設定 sold out 的 background 疊在圖上（有誰要再幫我補充的嗎XD
>[name=Sz 分享][color=#BB84F5]
## 已加入購物車提示
:::spoiler 如圖
:::
<br>

> 可用 bs 的 modal
> https://codepen.io/viccjiang/pen/PopgQOV
>[name=Jiang V 分享][color=#A7E683]

> 也可以參考 bs 的 alert

## input：email 的輸入欄位
:::spoiler 如圖
:::
<br>

>[formspree](https://formspree.io/)
可以註冊之後就讓使用者擁有 email 的輸入
>[name=Summer.H 分享][color=#F5697A]

>訂閱區塊
https://codepen.io/viccjiang/pen/wvJZpRx
>[name=Jiang V 分享][color=#A7E683]

## copyright 圖示
>在標籤內輸入`&copy;`也可以直接顯示 &copy;
>[name=Summer.H 分享][color=#F5697A]

## 圖片切版
> 香水電商裡面非滿版的欄位幾乎都可以用 bs 的 card
圖片用 `<img>` 標籤
如果會 ps 的話
可以先開夠大的固定比例畫板
把圖片都丟進去對好位置後，用圖層轉存檔案批次輸出
> 
>[name=Sz 分享][color=#BB84F5]

## 首頁交錯的商品介紹

>flex 變化
https://codepen.io/viccjiang/pen/ZEeZaqR
>[name=Jiang V 分享][color=#A7E683]

## bootstrap 補充
:::spoiler 如圖
>
:::
<br>

>覺得bootstrap裡面有，想搜尋但叫不出名字的時候可以看[元件一覽](https://www.uplabs.com/posts/bootstrap-4-all-components)找
>[name=Sz 分享][color=#BB84F5]

# 第二題 - 討論六角學院版型

觀察[六角學院](https://www.hexschool.com/)在 Mobile、iPad、PC 樣式上有什麼明顯的變化
## Breakpoint
### 1200px 以下
- 非滿版內容會再變窄
- 直播班 card 按鈕：多欄改為單欄
- [學員作品的按鈕](https://hackmd.io/pU9lWrDaRy2-UKe86H4rnQ?both#%E5%AD%B8%E5%93%A1%E4%BD%9C%E5%93%81)（？）
### 991px 以下
- 非滿版內容會再變窄
- card：多欄改為單欄
### 768px 以下
- [logo](https://hackmd.io/pU9lWrDaRy2-UKe86H4rnQ?both#logo)：簡化
- [nav](https://hackmd.io/pU9lWrDaRy2-UKe86H4rnQ?both#nav)：變成下拉式選單
- 圖解：多欄改為單欄
- banner 區域：多欄改為單欄
> 首頁沒有設定手機版
> 該不會是為了讓同學都用電腦上課所下的暗示XD
> [name=Sz 分享][color=#BB84F5]

## 多欄改為單欄
### 991px 以下
:::spoiler 如圖：card 的欄位變化
:::

### 768px 以下
:::spoiler 如圖：直播班按鈕欄位變化
:::

:::spoiler 如圖：banner區域的欄位變化
:::

:::spoiler 如圖：並排的圖解的欄位變化
:::

:::spoiler 如圖：footer 的欄位變化
:::
<br>

>footer 區塊排版不同
>[name=Jiang V 分享][color=#A7E683]

## logo
:::spoiler 如圖：縮窄後省略了 icon
變成
:::
<br>

>之前有看到直接從 HTML 寫[響應式圖片](https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)的設定
>感覺可以適用於 logo 響應式換圖的情況
>就算是沒有支援`<picture>`的瀏覽器，也可以讀到最後的`<img>`標籤
>[name=Sz 分享][color=#BB84F5]
>
> ```
> <picture>
> <source media="(max-width: 799px)" srcset="簡化圖片.jpg">
> <source media="(min-width: 800px)" srcset="完整圖片.jpg">
> <img src="完整圖片" alt="">
></picture>
>```
>

## nav
:::spoiler 變成下拉式選單
:::
<br>

>[name=Jiang V 分享][color=#A7E683]
## 學員作品
:::spoiler 按左右的地方與背景的更動
~~美麗的誤會~~
:::
<br>

> 學員作品的箭頭 ?!
>[name=Jiang V 分享][color=#A7E683]

# 本週直播相關分享
> [每週直播筆記](https://coda.io/@szl/hexschool-2021frontendcamp-note) -> 第三週：RWD
> [name=Sz 分享][color=#BB84F5]
>* 講義內容
> * jQuery 使用簡介
> * RWD 準則
>* 先考慮 reverse 再考慮 order
>* nth-child 非必要少用
>* emmet｜自動產生編號：$

>jQuery 基礎教學筆記
https://codepen.io/viccjiang/pen/dyvLZjx
>[name=Jiang V 分享][color=#A7E683]

> 切版軟體
> [線上版軟體（介面類似PS）](https://www.photopea.com/)
> [GIMP（開源軟體）](https://www.gimp.org/)
>[name=Summer.H 分享][color=#F5697A]

# 上週內容補充
## 負的 margin 的後續討論
上週討論到甜點電商的翻頁部分的問題，說到 border 如果設定成單邊用隔壁的負 margin 蓋過去的時候，hover 狀態想要顯示四周的 border 都變色的效果就會出不來。
> 突然想到 z-index 屬性，就試了一次：[Pagination_z-index](https://codepen.io/h2m730131/pen/ExWGbyB)，不知道還有沒有其它方式。
>
> [name=kevinhuang 分享][color=#37E4FF]

# 開會截圖

使用軟體：[gather](https://gather.town/)
大家很 chill 的在咖啡廳開會XD