---
tags: 網頁切版直播班 - 2021 夏季班
---

# 7/27 線上 Slack 助教

## 今日助教輪班時間

Bingbingboom：7/27 (二)
回覆時間：早上 9:00 - 中午 12:00

## 發問規範

老師助教同學們好，**這是我的 Codepen**，我**原本預期**「HTML 第 8 行會出現 ...」，**但卻出現預期外的結果**「...」，想問下問題出在哪裡？

## 注意

1. 請各位先到 Slack 上將問題放在助教服務內的 thread，如圖
2. 遵循以上的發問規範以便助教查看問題，不可直接貼上網址而沒有說明文字或者只提供截圖
3. 助教會依照 Slack 上的順序回覆問題
4. **以下問題區塊只能由助教自行增加**
5. 助教會將回覆寫在下方問題區塊

## 問題

1. **蔡明達：**
Bingbingboom 助教您好，這是我的 [Repo](https://github.com/JackTsai890405/W3-and-W4) [Github Pages](https://jacktsai890405.github.io/W3-and-W4/)
我在做第三週 RWD 首頁時碰到有關高度不一所出現的問題，
在 PC 版時顧客推薦內的 CARD 第一個和第四個卡片會明顯比較短，
目前使用的方法是在卡片外寫死高度，內部圖片與文字區塊利用 height + % 做排版，
不知道助教有沒有其它推薦的寫法能夠建議我如何撰寫會更好呢？
> 助教回覆：
> 如果不寫死高度的話可以在 .customContainer ul li 設定 `display: flex; flex-direction: column;`，並在 .enclose 設定 `flex-grow: 1;` 讓下方文字區塊可以撐滿整個剩餘空間，然後在 p .text 上設定往下推擠的 margin 就可以哩（這邊會建議圖片可以依照設計稿來設定高度哦，需記得加上 object-fit: cover; 防止圖片變形）
> （寫了一個 [範例](https://codepen.io/Bingbingboom/pen/abWqzMX?editors=1100) 給你參考看看）

---

2. **Karen Huang：**
助教好：這是我的 [Codepen](https://codepen.io/Coding_Snorlax/pen/OJmQPyJ) 連結
目前我在寫第三週主頁的 header，
在寫到手機版的 RWD 時候，在 CSS 的 75-87 行之間，我希望讓我的 .menu 裡的 li 可以變成兩列的表格，但現在是四列，
不太確定原因是什麼，可以幫我看一下嗎？謝謝！
> 助教回覆：
> 因為同學在 .menu 寫死了寬度，加上 box-sizing 預設為 content-box，寬度是設定的 width 加上 padding 及 border，所以同學在 li 設定寬度為 50% 再加上 padding、border 的值就超過了 .menu 寬度的一半，所以下一個 li 就會因為 flex-wrap: wrap; 超過 .menu 寬度自動換行摟
所以這邊需要加上
>
> ```
> *, *::before, *::after {
> box-sizing: border-box;
> }
> ```
> ，讓所有元素及所有元素的偽元素都可以吃到此項設定。當你設定多少寬高，就會呈現出甚麼寬高哦，就不需要再去計算盒模型的寬高哩
> （可以複習 [影音課程](https://courses.hexschool.com/courses/2020112/lectures/31938456)）

---

3. **Fred Chang：**
Bingbingboom 助教您好,
這是我的 [Repo](https://github.com/fred8196/webLayout-week3)、[Page](https://fred8196.github.io/webLayout-week3/)，有兩個昨日助教回覆的問題尚有疑問，想再次請教:
1. 關於昨日的問題 1，還是有點不清楚 h3 的寬度是被什麼限制住而導致換行。
2. 關於昨日的問題 4，改成助教提供的相對路徑仍然無法正常顯示 logo。
再麻煩助教協助，謝謝~
> 助教回覆：
> 1. h3 被父層 .co-branding-products li 限制在此區塊中，當你使用 left: 50%; 會讓文字推到右邊擠壓到邊界，所以會導致換行哦
> 
> 2. 助教這邊觀看使用 `../images/logo.png` 是可以成功呈現出來的哦，你再試試看

---

4. **Kent：**
薰云助教您好，想問兩個在首頁上問題(bug)：
1. 偽裝元素的問題，我嘗試在眼鏡行首頁的聯名框設計中的白底，嘗試用偽元素方法，問題提卡在 :hover::after 效果失敗，我原本預期 &:hover::before 讓白底隱藏，然後加上讓圖片模糊的偽元素，請問是否用錯偽元素了，github 偽元素 code 連結。
2. form padding 在手機版跑版問題，我使用 col-8 + 置中來當作寬度，在手機版時改為 col 12，不知道哪邊跑版導致 form padding 被擠掉跑掉。
作業連結：[repo](https://github.com/spmdl/optical-website/tree/master)、[demo](https://spmdl.github.io/optical-website/)
> 助教回覆：
> 1. 這邊因為 filter 需搭配 background 來使用（background-image 或是 background-color），照同學方式如果要直接使用的話可以改為使用 backdrop-filter（參考：[解決方式](https://codepen.io/Bingbingboom/pen/eYWVpYm?editors=1100)）
> 2. row 的外層少了 container 哦 ~

---

5. **周周：**
助教同學們好，這是我的 [GitHub](https://github.com/JHOUJHOU/rwdmaintask)、[Pages](https://jhoujhou.github.io/rwdmaintask/)
1. 我原本預期「在 _location.scss 第 22 行輸入 `justify-content: space-between;`」，但最後一個會跑到第二行的最右邊，我有試著再加上 `align-content:flex-start` 但沒有效果」想請問要如何設定才能靠左？
2. 我原本預期 footer 右邊三個圖在 767px 時會自適應螢幕寬度，但不知為何會超出版面?

再麻煩助教確認，感謝您
> 助教回覆：
> 1. 這邊建議可以不使用 `justify-content: space-between;` 可以直接使用 margin padding 推出間距哩，另外也可以觀看第三週助教直播嘗試使用下方處理間距的第三種方法（padding + border-box）來製作哦
> 2. 因為同學的圖片寬高是寫死的哦，需要隨著斷點來改變寬高哩 ~

---

6. **YuriT：**
助教您好, 這是我的 [Codepen](https://codepen.io/wenfisht/pen/dyWdoKp)連結,
原本預期 118 到 173 的偽元素運用, 能做成和設計稿一樣，文字也能對齊，
不知道該如何處理比較好？再麻煩助教回覆 ~ 謝謝您~:heart:
> 助教回覆：
> 同學是指「上下的文字邊界」可以切齊嗎，如果是的話建議 icon 不要使用偽元素的方式來製作哦，因為偽元素不能調整圖片大小，會比較難控制。另外 icon 外圍都還有一點留白空間，建議也都可以依照設計稿來製作哦，會更符合設計稿哩 ~
> 

---

7. **Kent：**
助教您好，不好意思我來找您解 bug 了
1. image zoom hover 破版問題，在首頁經典系列鏡框的 img 我加入 hover img 放大效果，但要保持圖片自適應縮放不能寫死導致 width 會破版（img 只有設置 max-height: 320px;），想詢問是否能夠保持圖片縮放也達到不縮放不破版的效果。
2. 偽元素 hover 底線滑出的問題，我預期它滑鼠離開後，現可以從左邊往右邊收回，達到線條連續效果的感覺（現在是右邊往左邊收回），有設置 right、bottom，但沒作用。
再勞煩助教幫忙了，感謝:man-bowing:

作業連結：[repo](https://github.com/spmdl/optical-website/tree/master)、[demo](https://spmdl.github.io/optical-website/)
> 助教回覆：
> 1. 這邊同學是指「hover 時圖片不要超出圖片的區塊覆蓋到文字但有縮放的效果」對嗎，如果是這樣的話，可以將 img 外使用一層 div 包覆並將 col-* 移到 div 使用，並加上 overflow: hidden; 就可以哩 ~
> 2. 目前測試如果想要達成同學 hover 從左到右，滑鼠移出時線條從左往右收回的效果需使用 JS，這邊先建議同學可以先以原始的「左 -> 右，右 -> 左收回」或是「右 -> 左，左 -> 右收回」為主就好了 ~

---

8. **Karen Huang：**
助教好：這是我的 [Codepen](https://codepen.io/Coding_Snorlax/pen/OJmQPyJ)
我想請問第一個問題：
在 Codepen CSS 第 63 行我是設定 `justify-content: space-between;` 預期應該要 .menu 跟 .socialMediaList 要各自跑到容器兩端才對，但不知為何社群媒體那塊的右邊一直有一塊我推不過去？很好奇那是什麼？因為設定 `margin: 0, padding: 0;` 也沒用 ...!!!
第二個問題是，html 中的 25, 26 行及以下的這些文字為何都有底線？且也不是 border-bottom，用 text-decoratioin 也都消不掉～～
以上感謝！！
> 助教回覆：
> 1. 這邊觀看同學的 HTML 第 17 行開始 socialMediaList 內的 a 標籤都少了結尾標籤哦，補上就可以哩 ~
> 2. 這個也是因為上述問題造成的哩 ~ 將上述問題補上後就沒問題摟 ~