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

# 8/4 線上 Slack 助教

## 今日助教輪班時間

Bingbingboom：8/4 (三)
回覆時間：早上 9:00 - 中午 12:00，下午 1:00 - 5:00

## 發問規範

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

## 注意

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

## 問題

1. **Cate Chang：**
Bingbingboom 助教您好：
這是我的 [GitHub Pages](https://changx2.github.io/dashboard/index.html) 以及 [GitHub Repo](https://github.com/Changx2/dashboard/tree/main)，
目前第五週作業只用了左側選單，
原本預期在 _sidebar.scss 第 17 行至第 23 行，設定左側選單的連結變色效果，結果滑鼠移入後卻沒有變化。
最下方人物照片在本地端預覽時都顯示正常，上傳 GitHub 後就顯示不出來。
不知道哪邊設定出了問題，希望能幫忙解惑，感謝！:pray:
> 助教回覆：
> 1. `預期在 _sidebar.scss 第 17 行至第 23 行，設定左側選單的連結變色效果，結果滑鼠移入後卻沒有變化`
> -> 因為 BS5 的 .text-dark 使用了 !important 所以無法覆蓋掉樣式哩。這邊建議可以更改 _variable.scss 中 $link-color 的預設樣式哦（可以改為 $gray-900），再嘗試看看 ><!
> 2. `最下方人物照片在本地端預覽時都顯示正常，上傳 GitHub 後就顯示不出來`
> -> 部屬到 Github 上要使用相對路徑才能顯示哦 ~
> 也就是說要改成 `./assets/images/andychen.jpeg` 或是 `assets/images/andychen.jpeg` 才能抓到圖片哦，若是開頭為 `/` 是絕對路徑，Github 會抓不到哩 ><!
關於相對路徑與絕對路徑可以觀看此[影音](https://www.youtube.com/watch?v=tbnpDisJ4bs&t=3628s&ab_channel=%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2)

---

2. **kevinhes：**
Bingbingboom 助教您好
這邊是我的 [repo](https://github.com/kevinhes/layoutweek5) 以及 [githubpage](https://kevinhes.github.io/layoutweek5/)
想要詢問關於右側的 欄位 我下了 content 跟 container ，下層的導覽列 我是下 header ，在此情況下，如果我不給 header width 的屬性 header 不會自適應瀏覽器的寬度，給了他 width 100% 也不理我，目前的做法是給他 width 75% 他就會有反應， 想要請問您一下這是什麼原因
> 助教回覆：
> 這是因為 container 的寬度在 PC 版為 max-width: 1320px，若是同學螢幕寬度不夠大就會跑到視窗外（可以發現出現了 x 軸）。而同學設定 width: 100%; 就還是一樣的哩（1320px 撐滿整個 container），這就是同學設定較小寬度時才能看到在視窗內的原因哦。
這邊也提供同學一點建議不要使用 margin-left 來推擠哩，可以嘗試在最外層使用 container-fluid 及 flex，右側設定寬度 % 嘗試看看

---

3. **roger：**
Bingbingboom 助教您好：
這是我的 [GitHub Pages](https://james73007.github.io/week5/) ，
目前第五週作業遇到了問題，左側選單下方的圖片我使用背景圖片來顯示，想請問助教是有哪邊語法不對嗎，為什麼存檔後圖片無法顯示?
下圖為背景圖片程式碼截圖
> 助教回覆：
> 背景圖片要設定寬高才會顯示出來哩 ~ 少了**寬度**的設定哦

---

4. **zyc：**
Bingbingboom 助教您好，附上我的 [repo](https://github.com/zyan-c/dashboard) 和 [gh-page](https://zyan-c.github.io/dashboard/)
1）想請問關於 index.html 和 _index.scss 問題：
為什麼首頁的 nav 會出現在左側固定的nav 下面？而且 index 的兩隻檔案沒有設定出現 logo 的樣式。並且已經用 .container max-width:1280px; 包起來，不是應該出現在右邊嗎？
2）layout.html 和 layout.scss 問題：
左側的 navbar 有設定 justify-content:space-between; 為什麼仍然會有紫色空間呢？
3）另外，如何設定底部的 .profile 固定在最底層？
謝謝
> 助教回覆：
> 1. 上下兩個 nav 外層要使用 display: flex; 才會並排哦。關於 `index 的兩隻檔案沒有設定出現 logo 的樣式` 這邊我看是有出現 logo 的哩 ~
> 2. .navbar 主軸線是由左往右，內層三個元素都已經貼齊邊界，設定 justify-content: space-between; 還是一樣的哩。不明白同學是想呈現出怎樣的畫面
> 3. 將 .navbar 主軸線改為 column 就可以哩

---

5. **ZengZeng：**
Bingbingboom 助教妳好～這是我的 [Codepen](https://codepen.io/tyzyoko/pen/WNjgbQy)
想請教關於 [7/28 每日任務](https://hackmd.io/DVjR5IVrQziACcs7eekcFQ?view) SCSS 結構的觀念問題，雖然這題沒有標準答案，但現在觀念還不是很熟，所以還是想問看看:joy:～
如果我將 .menu 的 SCSS 結構拆分得很細（如 Codepen 上的第 19-34 行），會造成什麼影響嗎？例如：不好維護、權重劃分不清，或是會有大家通用的格式..等等。
再麻煩助教解惑～感謝！:pray:
> 助教回覆：
> 這樣子是可以的哩，在撰寫 SCSS 寫法的時候主要注意不要讓巢狀結構超過 4 層，避免降低網頁渲染效能就可以了 ~

---

6. **Karen Huang：**
嗨，助教你好，這是我的 [github repo](https://github.com/CodingSnorlax/opticalshop/tree/main/app) 以及 [github page](https://codingsnorlax.github.io/opticalshop/) （因為一直還沒收到焦糖助教的回覆，所以想先在這邊發問了ＸＤＤ，焦糖助教那邊的問題我就先刪除囉）
我在寫眼鏡形象網站主頁的 RWD 的時候，有四個問題想請問助教：
1. 目前我的手機版在主視覺，也就是 index.scss 的第 51 行的地方，應該怎麼寫，我的背景圖的位置才會像設計稿一樣？應該是在那個男主角跟玻璃鏡面鏡射的位置，而不是一片空白處(???) 我有試過用 background-position 來調位置，但也沒試到正確的地方，想知道是否是我用錯方法？
2. 在手機版的「經典系列鏡框」裡的 functional 那個覆蓋在圖上的標題字，好像特別偏右，但我不曉得原因？在 index.scss 的 182~186 行之間，我下了 `align-item: center;` 及 `justify-content: center;` 預期應該跟前面兩個一樣，都是垂直置中的。
3. 在平板及手機版的「顧客推薦」那邊，我在 .customerText 那邊下了 padding，預期會將 .customerText 和 .date 的內間距推開，可是我很好奇的是，這個地方的內間距在平板與手機版的時候，都是不太一樣的，所以我是分別按照設計稿把內間距寫上嗎？或有更標準的寫法？因為我知道高度不能寫死，然後已經有用 `justify-content: space-between;` 推開了，但我很好奇在實務上當遇到內文長短不一的時候，li 要怎麼樣才能自動讓它每個都能有一樣的 height。
4. 在手機版的「聯絡我們」這邊，我的 submit 按鈕（在 index.scss 內的 522 行的地方），按照設計稿將「確認送出」改成 `font-size: 14px`，另外按鈕的寬高我也調整跟設計稿一樣，可是卻出現我的 submit 按鈕上的「確認送出」好像偏下，關於這個問題，我已試過兩個方法，但都無用，方法如下：
(1) 我將 line-height 調高成跟 submit 一樣同高的 36px，想要垂直置中，但失敗了。
(2) 我在 submit 按鈕上下 `vertical-align: middle;`
所以想問助教，我的第四個問題應該怎樣破解，我的「確認送出」才能跟 submit 按鈕垂直置中？
> 助教回覆：
> 1. 可以嘗試將背景圖片換成 [較小張的圖片](https://github.com/hexschool/webLayoutTraining1st/blob/master/week3/banner-sm.png?raw=true)，並依照設計稿調整高度。
> 2. 這是因為 classicSeriesText 寬度的問題哦，使用開發工具觀看其實都是有置中的（如圖），建議可以將 classicSeriesText 寬度設定為 100% 並在 classicSeriesText 使用 justify-content: center; 水平置中哦
> 
> 3. 這邊外層 li 需要設定 `diplay: flex;` `flex-direction: column;` 並在 .customerContent 設定 `flex-gorw: 1;` 使其撐滿剩餘空間。這樣在觀看設計稿時，只需要依照內文最長與下方日期的間距來設定就可以摟（.namePaddingBottom 不需設定 padding-bottom: 24px;）（這邊也提供兩種方法給你參考：[使用 space-between]( https://codepen.io/hexschool/pen/PomJOVN?editors=0100) 、[使用 margin-top: auto](https://codepen.io/TzuHui/pen/QWvrKqw)）
> 4. 請把 input 的高度 height 都拿掉哦

---

7. **lumei：**
助教您好，這是我的 [github repo](https://github.com/ying30821/week4) 和 [github pages](https://ying30821.github.io/week4/)
想請問用檢查工具手機尺寸 觀看首頁的經典系列鏡框圖片是正常的，為什麼真的用手機看時，圖片會被拉伸呢？(附圖是手機的截圖)
> 助教回覆：
> 這邊是因為 safari flex 的問題，可以觀看[這篇](https://stackoverflow.com/questions/57516373/image-stretching-in-flexbox-in-safari)
> 這邊建議可以嘗試看看將 img 外層包一個 div

---

8. **Jiang V：**
助教您好，
1. 我想請教在 hover sidebar 的每一個 item 時，item 左側 border 都會推擠到右邊的 icon 跟文字，請問這裡該如何修改程式 ?
2. 另外想請問我想實現我點擊到 sidebar Assignment 這個 item 時，左側 border 可以停留在這裡，請問要怎麼調整程式呢 ?
這是我的 [repo](https://github.com/viccjiang/2021layout_week5_dashboard) 跟 [gh-pages](https://viccjiang.github.io/2021layout_week5_dashboard/) 再請助教協助，謝謝 !
> 助教回覆：
> 1. 可以先設定一個透明的 border，這樣在 hover 時就不會有推擠的效果了
> 2. 可以嘗試使用 :focus

---

9. **Lina Chen：**
老師助教同學們好，這是我的 [GitHub repo](https://github.com/Lina-SHU/dashboard-week5), [GitHub Pages](https://lina-shu.github.io/dashboard-week5/admin.html)
在 modal 內使用 collapse，原本預期開啟 collapse 後可再次點擊關閉 collapse，卻無法正確關閉。
在 console 有跳出訊息(如下圖)，想請問是否要更改檔案的路徑(以及可在何處更改)?~
感謝您們~
> 助教回覆：
> 這邊觀看應該是因為 Bootstrap 重複載入造成的問題，這邊建議同學將 layout.ejs 內的 [Bootstrap CSS](https://github.com/Lina-SHU/dashboard-week5/blob/0b1aa5a1a0638e965486c643406d6594f11c8dcb/app/layout.ejs#L10) / [Bootstrap JS](https://github.com/Lina-SHU/dashboard-week5/blob/0b1aa5a1a0638e965486c643406d6594f11c8dcb/app/layout.ejs#L74) 移除，嘗試看看哦

---

10. **Sec：**
助教好, 我在做第 4 週的 locate 時出现 footer 下有一點空白，請問 footer 和 header 用 position: fixed 来固定着比较好?

[code](https://github.com/SecYJ/-4-/blob/master/app/locate.html) / [ghpage](https://secyj.github.io/-4-/locate.html)
> 助教回覆：
> 關於下方留白大多都是在較大螢幕會發生，
因為效能的關係所以不建議同學在大區塊上使用 fixed（通常都運用在小 icon 上，fixed 在手機上的效能不太好），同學可以先不用管它哦！

---

11. **蔡明達：**
助教好,
[GitHub Pages](https://jacktsai890405.github.io/Week5/)
[GitHub](https://github.com/JackTsai890405/Week5)
1. 我在做第五週的首頁時按下黃色區塊 理想上 -> 在黑色區塊顯示覆蓋原有的內容
結果是 -> 跑至紅色區塊 ，還使按鈕變形

2. 在做第五週的 Admin 頁面時
不知道為什麼按下紅色區塊 -> 橘色區塊卻在右側出現 正常來說應該要跑到下面去ㄉ
> 助教回覆：
> 1. collapse 是讓原本的元素變為 `display: block;` 顯示出來，這邊可以看到，.card 是放在外層 div d-flex 內，所以會和前面兩個 a 標籤並排哦。這邊建議同學可以在外層 div 設定 `position: relative;` 並在 .card 使用絕對定位來設定哦
> 2. 助教這邊觀看是正常顯示的哩 ><!

---

12. **Harold：**
老師助教你們好
我想請問如何整列的字體大小不同，但是行高相同的文字可以正確的往下對準
[GitHub Page](https://haroldzhen.github.io/front-design-course-week5/admin.html), [GitHub Repo](https://github.com/HaroldZhen/front-design-course-week5)
> 助教回覆：
> 想確認同學指的行高相同是「Admin」與「+Add New Admin」嗎，助教這邊觀看，兩個行高是不一樣的哦。
> 或是可以請同學再具體說明一下是哪個元素想要底部對齊呢
> 另外底部對齊可以使用 `display: flex;` 與 `align-items: flex-end;` 來達成哩

---

13. **Karen Huang：**
哈囉～助教你好！
我昨天有詢問關於手機版背景圖的問題，後來有換比較小張的圖，我用手機看，後來發現圖片好像跑版了，但我用 Chrome 看都正常＠＠|||，有點苦惱....遇到這樣的狀況是應該先以 Chrome 為主嗎？謝謝助教～
> 助教回覆：
> 可以觀看[這篇](https://stackoverflow.com/questions/21476380/background-size-on-ios)，在 iOS 上 `background-size:cover;` 及 `background-attachment: fixed;` 會造成這樣的問題，建議可以先不使用 `background-attachment: fixed;` QQ（或是在手機版時將 background-attachment 變回預設值 scroll）